なかなか気付かれにくいけれど、見つけたら「おおっ!」となるSVGアニメーションのテクニック

ヘッダに配置されたハンバーガーメニュー。
まぁ、ハンバーガーメニューでなくてもいいのですが、スクロールするとヘッダから流体のようにちゅるんと分離するアニメーションを紹介します。

実装しても気付かれにくいですが、見つけたら嬉しくなりますよね。

デモのキャプチャデモのアニメーション


サークル状のアイコンとヘッダの背景が同じホワイトで、どのようになっているのか分かりにくいと思うので、ヘッダの背景をグレーに変更してみました。

デモのアニメーション

ヘッダの背景をグレーに変更

実際の動作は、下記でお楽しみください。

See the Pen Nice Scroll Effect SVG by ahmed beheiry (@ahmedbeheiry) on CodePen.

実装

HTML

ちゅるんと分離する仕組みのポイントは、SVGのfilter要素です。これによりSVGにブラーエフェクトを与えています。

CSS

ハンバーガーメニュー自体はSVGではなく、CSSで作られています。

top of page

©2017 coliss