こんにちは。
モンブランの江藤です。
突然ですが皆さん、
フッターを超えた先にコンテンツがあるサイトを見たことありますか？
え？フッターってページの終わりなんじゃないの？？
僕もそう思ってました。
そんな先入観をブチ壊したサイトを紹介します。
ブログについてはもっと更新してください
フッター超えた先に物語が！？
今回ご紹介するサイトはヒゴワンさん。
（また？？って言わないで…）
以前 こちら の記事でも紹介しましたが、
本当にハチャメチャな、常識を振り切ったデザインのWebサイトです。
そんなハチャメチャなサイトの常識外のコンテンツがこちら！
？？？？？？
どゆこと？？？？
コンサルの会社なのにエイリアンと戦ってる？？？？
しかもこのコンテンツの怖いところが、、、
長さだけならフッターまでの長さより長いんですよ…
デザイン見た時は笑うしかなかったですね。。笑
htmlソースはこんな感じ。
大体画像での出力なのでソース自体はコンテンツほど長く無いですね。
それではいつも通りざっくり動きの部分を見ていきます
まずスクロールして表示領域に入ったタイミングでアニメーションを設定するため、
jqueryプラグイン「inview.js」を使ってイベントを設定します。
具体的には「inview」というクラス名がついた要素が表示領域に入った際に
「move」というクラス名を追加すると言った感じです。
そして実際の要素の作りとしてはこんな感じ。
要素全体を div.img01 で囲み、その中にそれぞれ p span div.imgarea がある感じですね。
この部分のcss全体はこんな感じ。
（今回は動きの部分だけ説明します）
まず 画像（div.imgarea）と 縦文字（p） に共通して、
opacity:0; transform:translateY(50px); を設定。
要素が透明かつY軸方向へ50px動いている状態ですね。
そして要素が表示領域に入った（.moveが付与された）タイミングで
それぞれに opacity:100; transform:translateY(0); を設定することで、
50px下から透明化を解除しつつ要素が出現するような動きになります。
また斜めの画像の影（.last .img01:before）の部分については、
通常時に translateY(-30px) translateX(-30px) を設定して
本来の位置から画像の下に重なるよう元々ずらし、
表示領域に入ったタイミングで translateY(0) translateX(0) を設定して
本来の影の位置に動かしています。
黄色のギザギザ背景文字（span）については、
translateY(50px) scale(0) で位置ズラしサイズを0に設定。
表示領域に入ったタイミングでtranslateY(0px) scale(1); にすることで、
下から上へ 徐々に大きくなりながら要素が出現する動きになります。
opacity だと フワッと出てきますが、
scaleだとポン！って感じに出てきますね。
最後の仕上げとしてそれぞれの要素に transition-delay を掛け出現タイミングを遅らせる事で
動きにメリハリを付けています。
（ここの動きは実際に何度も設定して気持ち良いところを設定してます。）
基本的な動きの設定はこんな感じで、
残りの12コンテンツにこのような動きの設定を
レイアウト毎に設定しています。
二度としたくないですね（多分今後も似たようなことをする）
今回ご紹介したヒゴワンさんのホームページはこちら！
サイトは見たけど、このコンテンツに気づかなかった！という方もいるのではないでしょうか？
ぜひ自らの目で狂気のコンテンツを確かめてください。