スクロールで色が変わるナビとIllustratorからのSVG書き出し[jQuery]

スクリーン用に書き出し

JavaScriptを鍛えたくて、ここ2、3日とあるサイトの模写をしていました。

スクロールに伴って、ナビゲーションバーの背景が透過のグラデーションから徐々に白色に、アイコンのSVGとテキストの色も変わっていくナビゲーション。

いかにもな動きでなくメニューも見やすくて、いろいろな方面で使えるなあと思いました。

自主勉と備忘録を兼ねてアウトプットしておくことにします。

スクロールで色が変わるナビゲーションの完成図

今回作ったものがこちらです。

スクロールで色が変わるナビのサンプル動画

 

上部のナビゲーション部分がスクロールされたときにはじめて背景色が付きます。

印象的な写真をメインに置きたいサイトなどでは、ナビゲーションが邪魔せず使えるのではないでしょうか。

ここで、アイコン部分もスクロールに伴い色を変更するために、アイコンをSVG化しようというお話です。

ナビゲーションバー部分のJSのソース

IllustratorからのSVG吐き出し

また、左上のアイコンはSVGで、元はIllustratorで加工し、SVGに吐き出したのですが、「SVGを組み込むとブラウザで表示がされない」ところで詰まりました。

原因は「吐き出すときにillustrator上のゴミが残っていたから」でした。削除したゴミとは、

  • 不使用のレイヤー
  • グループ化
  • クリッピングマスクやロック

です。これらは取り除き、アイコンの描画に直接関係ない効果はすべて取り除きクリーンなaiファイルにします。

ゴミが残った状態で吐き出したSVG

<path></path>タグ内のテキストが20行くらいひとつながりとなっています。

ゴミが残った状態で吐き出したSVG

illustrator上でゴミ類はきれいにし「ファイル>スクリーン用に書き出し」で書き出し。

「別名で保存」でもSVGに変更できますが、コードを見比べたところスクリーン用に書き出しからのほうがコンパクトでした。

スクリーン用に書き出し

またAdobeは「別名で保存」と「スクリーン用に書き出し」と両方、正規として解説記事を出していますが、「スクリーン用に書き出し」のほうが軽量化(最適化)されるのでこちらを勧めているようですね。

ゴミを取ってから「スクリーン用に書き出し」で書き出したSVG

fillのスタイルと<path>内にも class=”cls-1″ のclass名ありますが、これらはcss/jsの方で指定するためsvgからは削除します。

「スクリーン用に書き出し」で書き出したSVG

ちなみに、このアイコンはpngだと2KB、svgだと7KBでした。

svgの方が容量は重くなりますが、レスポンシブ対応の場合は複数画像を用意する必要がなくなるのでファイル数は削減され、描画も美しいためsvgの方が総じて扱いやすそうです。

他のソースファイルはこちらのGit内です。

まとめ

スクロールで色が変わるナビとIllustratorからのSVG書き出し方法をご紹介しました。

SVGは思ったよりは扱いやすいことが分かりました。
IllustratorはOKという方は、手軽に試してみてくださいね。

[kkstarratings]

タイトルとURLをコピーしました