こんにちは。
モンブランの江藤です。
突然ですがみなさん、画面いっぱいに散りばめられたイラストのデザインをコーディングするとします。
もちろんイラスト単体でも素敵なWebデザインですが、
どうせなら動かしたいですよね？？
でも画面いっぱいにあるイラストを動かすのは難しいし手間がかかる。。
いやいや！
実はやり方次第でめちゃくちゃ簡単にイラストを動かすことができちゃいます！
今回はそれを実装したサイトをご紹介しようと思います。
コマ撮り風の動きで阿蘇の風景とそこにある人々の営みを表現
今回ご紹介するサイトは、「阿蘇さとう農園」さん。
むかしむかしから受け継がれてきた阿蘇の営み、阿蘇らしい風景を、
千年先に暮らす人たちに受け継いでいきたい。
そんなさとう農園さんの想いをカタチにしたWebサイトです。
実績ページにはコーポレートサイトの紹介だけでなく、
リーフレットや制作時のコンセプトなど記載してありますので、
気になる方は是非ご覧くださいませ！
そんな阿蘇さとう農園サイトで実装した、簡単に動いてるイラストはこちら！
http://www.aso-satofarm.com/dream/
コマ撮り風のアニメーションで、
同じタイミングで複数のイラストが動いていますね。
実はこれ、動き自体はcss数行のみで実装しているんです。
仕組み的にはコマ撮りと似た要領なのですが、
下準備としてイラストを動かした各コマの画像を作成、
それを繋げて１枚の画像にします。
イラストの動きはCSSで制御せず、画像で準備しちゃいます。
その準備した画像をコマ送りのようにアニメーションで切り替えるだけ。
なので記述しているHTML&CSSはたったこれだけ！楽ちん〜！
画像を囲む figure.map に overflow:hidden; ではみ出た部分を非表示にし、
画像のサイズを横幅のコマ数倍（今回は４コマなので400%）に。
kefarameを下記のように設定し、それぞれのタイミングで画像の最初へ動かし、
@keyframes maps { from { left: 0; } to { left: -100%; } to { left: -200%; } to { left: -300%; } to { left: -400%; } }
下記のようにアニメーションの動きをステップにすることで
アニメーションの推移を無くしコマ撮り風の動きが表現できます！
animation-timing-function: steps(4, end);
欠点として画像が大きくなりがちなので、
書き出す際は画像に影響がない程度に圧縮したり、
preload であらかじめ読み込ませておくことが大事ですね。
cssは使い方と発想次第でいろんな表現ができますね。
今回ご紹介した動きもデザインによって合う合わないは絶対にありますが、
もし使えそうな時はぜひお試しください〜！
それでは今回ご紹介した「阿蘇さとう農園」さんのサイトはこちら！
紹介したコマ撮り風のアニメーション以外にもイラストが動いていたりするので、
一度覗いてみてください。