SVGだから快適!スマホアプリやWebサイトでよく見かけるアイコンをアニメーションで変形させるテクニック

スマホアプリやWebサイトでよく見かける、ハンバーガーメニューやケバブメニューのアイコンをアニメーションで変形させるUI用のスニペットを紹介します。

ケバブってなに? という方は「スマホアプリのメニューでよく使用されるあのアイコンの名前、ハンバーガーとかケバブとかミートボールとか」をご覧ください。

デモのアニメーション

Menu Button Animations
Menu Button Animations -GitHub


上記はアイコンが変形する仕組みをアニメーション化したもので、通常時は下記のように利用できます。
コピペで利用するのも楽しいですが、こういう仕組みを考えるのも楽しいですよね。

デモのアニメーション

通常のアニメーション

アイコンはSVGで実装されています。

ハンバーガーアイコンも同様に、クローズの「x」と矢印にアニメーションで変化します。

変形の仕組み

ハンバーガーアイコンも通常時は、下記のように表示されます。

通常のアニメーション

実際の動作は、下記ページで楽しめます。
左上の「Debug」をオンにすると、変形が表示されます(0.5xで見えます)。

See the Pen Dot Menu Animations by Tamino Martinius (@Zaku) on CodePen.

See the Pen Hamburger Menu Animations by Tamino Martinius (@Zaku) on CodePen.

sponsors

top of page

©2024 coliss