ぬるっとした動きが面白い!SVGアニメーションメニュー【GooeyMenu】

SVGアニメーション






ぬるっとした動きで目を引くメニュー「GooeyMenu」が最近のマイブームです。

WEBサイトのメニューと言えば、ハンバーガーメニューやトグルメニューのように直線的な動きを想像していましたが、いつのまにかSVGアニメーションを使って、ぬるっとした動きを表現する事も可能になっているみたいですね。WEBの世界はホント進歩が早い…。

自身のサイトに導入するかしないかは別として、参考までに紹介したいと思います。

ソースコード共有サイト「CODEPEN」

今回紹介する「GooeyMenu」は、ソースコード共有サービス「CODEPEN」で Lucas Bebber さん がアップされています。

CODEPEN」は、HTML・CSS・JavaScriptなどのサンプルコードを共有して閲覧・使用できるサイトです。WEB初心者にとっては見応えのあるコードがたくさんあり、まさにWEB初心者にとっての宝の山みたいなサイトです。興味のある方は一度のぞいてみてください。

CODEPEN

CODEPEN

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アニメーションメニュー」でした。







SVGアニメーション