スクロールによって立体的に浮かび上がるサムネイル
サムネイルに視点をフォーカスさせる仕掛けが目を引く、動画のポートフォリオサイト「MANUEL RUEDA」。ページ中央にあるサムネイルには奥行きが設定されており、スクロールによって手前に起き上がってくる動きが斬新だ。サイドナビにもスクロールに合わせたギミックが用意されており、コンテンツを何度も行き来してしまうおもしろさがある。
今回は、このサイトをヒントに、CSS3の3D表現とjQueryを使ったスクロールアニメーションを制作する。
STEP 1：スクロール値を取得する
スクロール値を基にCSS3のプロパティを変化させるため、スクロール値を正しく取得することから始めよう。
スクロール値は jQueryのscrollメソッドを使って取得する。以下のようにして現在のスクロール値を取得できる。
■ソースコード（HTML）
<p id="posy"></p>
■ソースコード（JavaScript）
$(window).on('scroll', function() {
// 現在のスクロール位置
var scrollPos = $(this).scrollTop();
$('#posy').html('スクロール値: ' + scrollPos + 'px');
});
STEP 2：奥行きのあるコンテンツを作成する
スクロール値を取得できているのが確認できたら、次にCSS3で奥行きのあるコンテンツを作成していく。
アニメーションさせる要素「.card」を親要素「#content」で包み、奥行きを持たせるためのスタイル「.perspective」を定義する。
「.card」には rotateX(90deg) を記述し、水平に倒した状態にしておく。コンテンツが下から起き上がるようなアニメーションにするため、変形の基準点となるtransform-originを要素の底辺中央（50%,100%）に設定する。
■ソースコード（HTML）
<div id="wrapper">
<div id="section" class="inner red">
<div id="content" class="perspective">
<div class="card">
<span>CONTENT</span>
</div>
</div>
</div>
</div>
■ソースコード（CSS）
* {
margin: 0;
padding: 0;
border: 0;
outline: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
#wrapper,
.inner {
position: relative;
width: 100%;
height: 100%;
}
.perspective {
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
-ms-perspective: 1000px;
-o-perspective: 1000px;
perspective: 1000px;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.card {
position: relative;
display: block;
margin: 0 auto;
width: 100%;
height: 100%;
border: 10px solid #FFF;
-webkit-transform-origin: 50% 100%;
-moz-transform-origin: 50% 100%;
-ms-transform-origin: 50% 100%;
-o-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transform: rotateX(90deg);
-moz-transform: rotateX(90deg);
-ms-transform: rotateX(90deg);
-o-transform: rotateX(90deg);
transform: rotateX(90deg);
}
.card span {
display: block;
position: absolute;
top: 50%;
margin-top: -50px;
width: 100%;
height: 100px;
color: #FFF;
font-size: 80px;
text-align: center;
text-transform: uppercase;
line-height: 100px;
}
.red { background: #F4726D; }
.red .card { background: #F68985; }
#content {
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
}
