こんにちは。
モンブランの江藤です。
モンブランではイラストを使用したWebサイトを作ることが多いのですが、
イラストをただ配置するのではなく、
適切に動かしたらイラストの魅力がさらに増し、Webデザインとしても彩りが増します。
Webサイトで一番重要とも言えるファーストビューでも、
イラストを適切に動かせば充分魅力的な表現ができます。
今回はそんなファーストビューでイラストを使ったWebサイトをご紹介します！
「どんぶらこ」と流れてくるイラストたち
今回ご紹介するサイトは、「donbraco」さん。
「岡山の新築一戸建て」紹介に特化したコーポレートサイトです。
実績ページにも紹介してあるとおり、
岡山・桃・流れてくる出会い。
地元に根ざしていることがすぐにわかるし、何よりキャッチー。
素敵なネーミングのWebサイトですね。
ファーストビューでは「どんぶらこ」と川から流れてくる様々なモノを表現しています。
実は今回基本的な動きはjsを使っておらず、
cssで斜めの動きを表現しています。
（js苦手なもんで笑）
下記のように背景をつけるとわかりやすいですが、
まずイラストのエリア全体をtransformで傾けてます。
そして傾けた要素内にイラストを配置した要素を2つ用意。
それぞれanimationで
transform: translateX(-100%); から transform: translateX(100%);へ
transform: translateX(0%);からtransform: translateX(-200%); へと動かしてます。
こうすることによって継ぎ目のないアニメーションが表現できます。
また、それぞれのアイコンの位置設定は・・・
コーディング時に実際に使用したpsd。もう二度としたくない。
こんな感じでそれぞれのアイコン1つ1つをAbsoluteで配置してます。
計36個。
またそれぞれ横幅などもcssで設定しているので、
マジで気合いと手数で実装してます。
なのでこの部分のソースえらいことになってます。笑
まだ下がある….
上記のソース画像でお気づきかと思いますが、
画像を2種置いてあるところは、「くるりんぱ」してる画像部分です。
（くるっと回転しながら画像が変わってるもの。）
この動きもcssのみで表現してます。
画像を配置した要素に2枚の画像をAbsoluteで配置、
それぞれの画像にAnimationでopacityとrotateのアニメーションを設定。
吹き出しのある画像は別途opacityを0に設定し、
アニメーションのディレイを半分の時間（アニメーションが4sなら2s）設定して、
片方がY軸に180度回転したと同時にもう片方が180度から0度へ回転し、
「くるりんぱ」と画像が切り替わる訳です。
こうしてどんぶらこ斜めに流れながらくるりんぱするファーストビューが構築されています。
説明できてるかな…
振り返れば、jsを使わずcssのみで色々動かせるものですね。
自分で組んだのにjs使ってないこと完全に忘れてました。。笑
それでは今回ご紹介した「donbraco」さんのサイトはこちら！
ファーストビュー以外でも素敵なイラストたちがひょっこり顔出したりするので、
実際にご覧くださいませ！