ぬるっとした動きで目を引くメニュー「GooeyMenu」が最近のマイブームです。
WEBサイトのメニューと言えば、ハンバーガーメニューやトグルメニューのように直線的な動きを想像していましたが、いつのまにかSVGアニメーションを使って、ぬるっとした動きを表現する事も可能になっているみたいですね。WEBの世界はホント進歩が早い…。
自身のサイトに導入するかしないかは別として、参考までに紹介したいと思います。
目次
ソースコード共有サイト「CODEPEN」
今回紹介する「GooeyMenu」は、ソースコード共有サービス「CODEPEN」で Lucas Bebber さん がアップされています。
「CODEPEN」は、HTML・CSS・JavaScriptなどのサンプルコードを共有して閲覧・使用できるサイトです。WEB初心者にとっては見応えのあるコードがたくさんあり、まさにWEB初心者にとっての宝の山みたいなサイトです。興味のある方は一度のぞいてみてください。
GooeyMenu
Lucas さんがアップしている GooeyMenu は4種類ありますが、どのメニューもぬるっとした動きが何とも言えないですね！思わず何度もメニューをクリックしてしまいます。
ぬるっと放射状に広がるSVGアニメーション
See the Pen CSS Gooey Menu (Version 2) by Lucas Bebber (@lbebber) on CodePen.0
つながって放射状に広がるSVGアニメーション
See the Pen Gooey Menu by Lucas Bebber (@lbebber) on CodePen.0
ぬるっと直線的に広がるSVGアニメーション
See the Pen CSS Gooey Menu (Version 3) by Lucas Bebber (@lbebber) on CodePen.0
つながって直線的に広がるSVGアニメーション
See the Pen CSS Gooey Menu (Version 4) by Lucas Bebber (@lbebber) on CodePen.0
CODEPENのSVGアニメーションを紹介
「CODEPEN」には、GooeyMenuだけでなく多数のSVGアニメーションを使用したコードがアップされています。アニメーションやコードを眺めていると「やっぱWEBすげぇ〜！」ってなります（笑）
ビールの泡がたまらない！
See the Pen Animated svg – Pintsize logo by Ali (@alistairtweedie) on CodePen.0
ぬるっと広がるアニメーション
See the Pen Gooey Menu Concept by Vivek Marakana (@vivekmarakana) on CodePen.0
だだ今ロード中！
See the Pen SVG Loading icons by Aurer (@aurer) on CodePen.0
まだまだロード中！
See the Pen SVG Loader Animation by Nikhil Krishnan (@nikhil8krishnan) on CodePen.0
ぬるぬるっとポリゴンが出現！
See the Pen SVG Low PolyLion: Animated Polygons by GRAY GHOST (@grayghostvisuals) on CodePen.0
おしゃれにサインイン！
See the Pen Login/Logout animation concept by Nikolay Talanov (@suez) on CodePen.0
ぬるぬる動く！カラフルテキスト
See the Pen Animated text fill with svg text by Cesar C. (@cesar2535) on CodePen.0
まとめ
いやぁ凄いですね、SVGアニメーション！！見ているだけで楽しいです。
SVGアニメーションはレスポンシブデザインにも対応して、スマホでも問題なく動くので、今後のスタンダードになるのは間違いないと思います。
いざ、クライアントから「こんな動きにしたいけど大丈夫か？」と言われた時に「問題ない」と応えれるように、しっかり勉強しておこうと思います。
「ぬるっとした動きが面白い！SVGアニメーションメニュー」でした。
