SVG×CSSで作る!パララックスアニメーション

Pocket

SVG Advent Calendar 2016、2日目担当のまついです。

昨年もSVGの記事を書いたのですが、設定のあたりで力尽きてしまったので、リベンジ。
今回は簡単なサンプルを作ってみました。

See the Pen Merry Christmas! by matsui (@matsui) on CodePen.

アドベントカレンダーということで、クリスマス仕様にしてみました。
時間の都合上、トナカイの足がすり足になってますが、スルーしてください。

今回、サンプルを作るにあたって、アニメーションさせたいけど、特に良いアイデアが思いつかなかったので、こちらのソースをパク…にインスピレーションを得て作成しました。
JSは使わず、CSSをごにょごにょして、背景がパララックスで動くようにしてます。
サンプルでは、横幅を100%に設定したため、ループしないようになってますが、横幅固定でイラストをうまくつなぎ合わせれば、きれいにループできると思います。
興味がある人は、Forkしていじってみてください。

イラストはIllustratorで作成して書き出しているのですが、実際に動かしてみるとあれ?という感じたっだので、大きさなどはCSS側でちょっといじってます。
SVGは大きくしても荒れないので、こういうとき便利ですね。

その他のサンプル

パララックスではないですが、SVGを使ったアニメーションでこんなのもありますよということで、いくつかご紹介。

161202_01
Sitepoint Challenge #1 in SVG and SMIL
モーショントゥイーンができるのもSVGのいいところ。
形や色の微妙な変化がいいですね。

161202_02
Hello SVG Animation Header
わりとがっつり動かしている例ですね。
ロゴを考えるとき、こういう動き込みで考えてみるのも楽しそうです。

161202_03
Floating Island
TweenMaxでアニメーションさせている例です。
SVGは色を変えることもできるので、こういう時間の変化を動きに取り入れるときなどにいいですね。

最後に

SVGならではの動きも模索したかったのですが、ちょっと時間がたりませんでした…。
また機会があれば作りたいです。

SVG Advent Calendar 2016については、まだ空きがあるようです。
コードを書かず、イラストでの参加もOKとのことなので、興味がある方は是非。

中の人について

matsui
大阪でwebのお仕事をしています。
ブログでは最近学んだことや、勉強会に参加したことを書いてます。