こんにちは。
モンブランの江藤です。
コンセプトやキャッチコピーなど「言葉」をデザイン＆コーディングで表現するって、めちゃくちゃ難しいですよね。
今回はそれをめちゃくちゃ上手にWeb上で表現ができてる〜！と
江藤が個人的に思ったサイトについてご紹介します。
珍しく今回は江藤コーディングではなく、
デザインもコーディングも出来てしまうすんばらしい女性、
我らが大瀬良大先生がコーディングしたサイトです。
ブログについてはもっと更新してください
「モノをお金に変える」をビジュアルで表現！
今回ご紹介するサイトはオービタルさん
使っていないものに、実は価値があるかもしれないという発見、「これってお金になるんだ」という驚きを与え、
「ものを売ってみよう」という行動を促すサイトを目指し制作しています。
こちらのサイトも実績ページでも紹介しております。
ぜひご覧になってください。
さてさて、今回恐縮ながら解説させて頂く場所はこれ！！
すごい！！！「モノ」が「お金」に変わってる！！！！！
しかも斜めに！！
ぬるぬる動いてる〜〜〜！！！
とっても素敵なメインビジュアル！
しかも動きも全部cssで組んでます。
だからめっちゃ軽いですね！
ソースはこんな感じでした。
組んだ本人だけじゃなくソースも綺麗かよ！
理想的な見やすさですね。
しかしながらパッと見ただけでわかる要素の多さ。
17個の長方形と丸にクラス入れて調整してるんですね。。大変そう。
それではいつも通りざっくり見ていきましょう。
まず大事な第1手、コンテンツを囲っている#mainvisual にheight&oveflow:hidden;を設定して、
要素からはみ出た部分は非表示にしてます。
実際に動かしてる枠組み #main_bg のcssで大事な部分が下記。
width: 150%; height: 200%; position: absolute; left: -25%; top: -50%; transform: rotate(10deg);
transform: rotate(10deg);で要素を傾ける関係上、 widthやheightが100%だと余白が出来てしまうので大きめに width:150%; height:200%; を指定してあります。
そして left:-25%; top:-50%; でサイズ余剰分の位置調整をしてますね。
それで肝心の動いている17個x2の要素はというと
#main_bg 直下の #main_leftが黄色背景・長方形が流れるコンテンツ、
#main_rightで丸型が流れるコンテンツ設定しています。
それぞれ共通して width: 50%; height: 100%; で入れて枠内いっぱいにサイズを設定して、
overflow: hidden; ではみ出ていく要素を非表示にしています。
それぞれ実際に動いている #main_left p と #main_right span は position:absolute; で位置を設定して、
動き自体は同じアニメーションが設定してあるみたいですね。
ソース見るだけでめんどくs …もとい大変さが伝わります。
#main_left と #main_right 内の動いている要素それぞれに animation: sq 6s 2.4s infinite; のように速度とディレイを設定して動きを調整してあるんですね。
また、同じナンバリングしてある要素に対して同じ縦位置・速度・ディレイを設定してあることで動きを同期するよう調整してありました！！なるほど〜！！！
大まかな設定は全体に設定、細かい部分はそれぞれに設定されていて見やすく調整もしやすそう。
動きに関しては実際に何回も何回も何回っも実行して良い感じになるよう調整したんだと思います。
こういうアニメーションは実際にみてみないとわからないですからね。
しかもそれを17個分。。
何度も試行錯誤して作られたコンテンツなんだ〜って感じます。
めちゃくちゃ良きですね。
今回ご紹介したオービタルさんのホームページはこちら！
ぬるぬる動くメインビジュアルをぜひ実際みてください〜！