実体験だけを語るブログメディアtorutsume.netTokyo2020チケット当選祭り海外国内転職フィリピンネタ子育てネタホームTECHスクロールで色が変わるナビとIllustratorからのSVG書き出し【jQuery初心者向け】スクロールで色が変わるナビとIllustratorからのSVG書き出し【jQuery初心者向け】TwitterFacebookはてブLINEコピー2018.11.09この記事は約3分で読めます。JavaScriptを鍛えたくて、ここ2、3日とあるサイトの模写をしていました。ミミウサ次のような動きのナビゲーションが作りたいです。スクロールに伴って、ナビゲーションバーの背景色が徐々に変わる。同時にアイコンのSVGとテキストの色も変わっていく。やったら作れますか?このようなスクロールで色が変わるナビゲーションを試行錯誤で作成しましたが、いろいろな方面で使えるなあと思いましたため共有します。動きの完成図は以下の作例のとおりです。今回作ったものがこちらです。上部のナビゲーション部分がスクロールされたときにはじめて背景色が付きます。印象的な写真をメインに置きたいサイトなどでは、ナビゲーションが邪魔せず使えるのではないでしょうか。ここで、アイコン部分もスクロールに伴い色を変更するために、アイコンをSVG化しようというお話です。ナビゲーションバー部分のJSのソースIllustratorからのSVG吐き出しまた、左上のアイコンはSVGで、元はIllustratorで加工し、SVGに吐き出したのですが、「SVGを組み込むとブラウザで表示がされない」ところで詰まりました。原因は「吐き出すときにillustrator上のゴミが残っていたから」でした。不使用のレイヤーグループ化クリッピングマスクやロックです。これらは取り除き、アイコンの描画に直接関係ない効果はすべて取り除きクリーンなaiファイルにします。ゴミが残った状態で吐き出したSVG<path></path>タグ内のテキストが20行くらいひとつながりとなっています。illustrator上でゴミ類はきれいにし「ファイル>スクリーン用に書き出し」で書き出し。「別名で保存」でもSVGに変更できますが、コードを見比べたところスクリーン用に書き出しからのほうがコンパクトでした。Adobeは「別名で保存」と「スクリーン用に書き出し」と両方、正規として解説記事を出していますが、「スクリーン用に書き出し」のほうが軽量化(最適化)されるのでこちらを勧めているようですね。class名ありますが、これらはcss/jsの方で指定するためsvgからは削除します。ちなみに、このアイコンはpngだと2KB、svgだと7KBでした。svgの方が容量は重くなりますが、レスポンシブ対応の場合は複数画像を用意する必要がなくなるのでファイル数は削減され、描画も美しいためsvgの方が総じて扱いやすそうです。他のソースファイルはこちらのGit内です。まとめスクロールで色が変わるナビとIllustratorからのSVG書き出し方法をご紹介しました。SVGは思ったよりは扱いやすいことが分かりました。IllustratorはOKという方は、手軽に試してみてくださいね。【侍エンジニア塾】総合評価は40点!初心者が入学した体験談と口コミ「侍エンジニア塾」にプログラミング初心者の筆者が入会した体験に基づく口コミ。40点という総合評価です。CSS)方法とSVGのアイコンにスクロールで色をつける(JavaScript)方法を紹介します。IllustratorからのSVG書き出しも。今日は短くプチ更新ですが「1日1コード1アウトプット」ということで、SVGで円を描くのお話です。4回目→現在パラレルワーカー。頂いた仕事はなんでもやるため特定の職種というものがなく、名刺に肩書は入れていません。torutsume.net.タイトルとURLをコピーしました。