スクロールによって立体的に浮かび上がるサムネイル サムネイルに視点をフォーカスさせる仕掛けが目を引く、動画のポートフォリオサイト「MANUEL RUEDA」。ページ中央にあるサムネイルには奥行きが設定されており、スクロールによって手前に起き上がってくる動きが斬新だ。サイドナビにもスクロールに合わせたギミックが用意されており、コンテンツを何度も行き来してしまうおもしろさがある。 今回は、このサイトをヒントに、CSS3の3D表現とjQueryを使ったスクロールアニメーションを制作する。 STEP 1:スクロール値を取得する スクロール値を基にCSS3のプロパティを変化させるため、スクロール値を正しく取得することから始めよう。 スクロール値は jQueryのscrollメソッドを使って取得する。以下のようにして現在のスクロール値を取得できる。 ■ソースコード(HTML) <p id="posy"
![スクロールアニメーションによる立体コンテンツの見せ方 (1/2)](https://cdn-ak-scissors.b.st-hatena.com/image/square/47b745ae929cfbc1d3d0cba6fa2dc95854e69a9f/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2014%2F07%2F22%2F406530%2Fl%2F2d59a91a0d8ba6ae.jpg)