なかなか気付かれにくいけれど、見つけたら「おおっ！」となるSVGアニメーションのテクニック
Post on:2017年4月12日
sponsors
ヘッダに配置されたハンバーガーメニュー。
まぁ、ハンバーガーメニューでなくてもいいのですが、スクロールするとヘッダから流体のようにちゅるんと分離するアニメーションを紹介します。
実装しても気付かれにくいですが、見つけたら嬉しくなりますよね。
サークル状のアイコンとヘッダの背景が同じホワイトで、どのようになっているのか分かりにくいと思うので、ヘッダの背景をグレーに変更してみました。
ヘッダの背景をグレーに変更
実際の動作は、下記でお楽しみください。
See the Pen Nice Scroll Effect SVG by ahmed beheiry (@ahmedbeheiry) on CodePen.
実装
HTML
ちゅるんと分離する仕組みのポイントは、SVGのfilter要素です。これによりSVGにブラーエフェクトを与えています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<header> <nav></nav> <div class="menu-trigger"> <span></span> </div> </header> <!-- SVG --> <svg> <defs> <filter id="goo"> <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="5"/> <feColorMatrix in="blur" result="colormatrix" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -8" /> <feBlend in="SourceGraphic" in2="colormatrix"/> </filter> </defs> </svg> |
CSS
ハンバーガーメニュー自体はSVGではなく、CSSで作られています。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
body { background-color: #3596ab; height: 2000px; } header { -webkit-filter: url("#goo"); filter: url("#goo"); } header nav { background-color: #fff; height: 80px; } header .menu-trigger { position: fixed; width: 50px; height: 50px; border-radius: 50%; background-color: #fff; cursor: pointer; top: 15px; right: 40px; } header .menu-trigger span, header .menu-trigger span::before, header .menu-trigger span::after { background-color: #555; width: 25px; height: 2px; position: absolute; } header .menu-trigger span { top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } header .menu-trigger span::before { content: ""; top: -6px; } header .menu-trigger span::after { content: ""; top: 6px; } |
sponsors
