JavaScriptを鍛えたくて、ここ2、3日とあるサイトの模写をしていました。
次のような動きのナビゲーションが作りたいです。
- スクロールに伴って、ナビゲーションバーの背景色が徐々に変わる。
- 同時にアイコンのSVGとテキストの色も変わっていく。
どうやったら作れますか？
このようなスクロールで色が変わるナビゲーションを試行錯誤で作成しましたが、いろいろな方面で使えるなあと思いましたため共有します。
動きの完成図は以下の作例のとおりです。
スクロールで色が変わるナビゲーションの完成図
今回作ったものがこちらです。
※クリックで再生
上部のナビゲーション部分がスクロールされたときにはじめて背景色が付きます。
印象的な写真をメインに置きたいサイトなどでは、ナビゲーションが邪魔せず使えるのではないでしょうか。
ここで、アイコン部分もスクロールに伴い色を変更するために、アイコンをSVG化しようというお話です。
ナビゲーションバー部分のJSのソース
IllustratorからのSVG吐き出し
また、左上のアイコンはSVGで、元はIllustratorで加工し、SVGに吐き出したのですが、「SVGを組み込むとブラウザで表示がされない」ところで詰まりました。
原因は「吐き出すときにillustrator上のゴミが残っていたから」でした。削除したゴミとは、
- 不使用のレイヤー
- グループ化
- クリッピングマスクやロック
です。これらは取り除き、アイコンの描画に直接関係ない効果はすべて取り除きクリーンなaiファイルにします。
ゴミが残った状態で吐き出したSVG
<path></path>タグ内のテキストが20行くらいひとつながりとなっています。
illustrator上でゴミ類はきれいにし「ファイル＞スクリーン用に書き出し」で書き出し。
「別名で保存」でもSVGに変更できますが、コードを見比べたところスクリーン用に書き出しからのほうがコンパクトでした。
またAdobeは「別名で保存」と「スクリーン用に書き出し」と両方、正規として解説記事を出していますが、「スクリーン用に書き出し」のほうが軽量化（最適化）されるのでこちらを勧めているようですね。
ゴミを取ってから「スクリーン用に書き出し」で書き出したSVG
fillのスタイルと<path>内にも class=”cls-1″ のclass名ありますが、これらはcss/jsの方で指定するためsvgからは削除します。
ちなみに、このアイコンはpngだと2KB、svgだと7KBでした。
svgの方が容量は重くなりますが、レスポンシブ対応の場合は複数画像を用意する必要がなくなるのでファイル数は削減され、描画も美しいためsvgの方が総じて扱いやすそうです。
他のソースファイルはこちらのGit内です。
まとめ
スクロールで色が変わるナビとIllustratorからのSVG書き出し方法をご紹介しました。
SVGは思ったよりは扱いやすいことが分かりました。
IllustratorはOKという方は、手軽に試してみてくださいね。
