CSS3のPerspectiveを使ったパララックス
Web ページに奥行きを感じさせて使い方によってはユーザー体験を向上させることを期待できるパララックスが登場して久しいですが、その実装方法は多岐にわたります。
JavaScript のライブラリーを使った方法が広く使われていますが、
今回は CSS3 の Perspective と JavaScript を組み合わせた方法を考えてみましたので、
ご紹介いたします。
↓作ってみたもの
DEMO
方法
- 【HTML】背景とコンテンツを配置
- 【CSS】perspective, transform-style, transform3d で奥行きののある配置を
- 【JavaScript】スクロール時に transform-origin を移動して、パララックスを表現
1.【HTML】背景とコンテンツを配置
|
1 2 3 4 5 6 | <div class="container"> <div class="bg"></div> <div class="contents"> ・・・ </div> </div> |
背景になる要素と、表に来るメインのコンテンツを同じ階層上に配置し、
それをdivなどの親要素で囲みます。
2.【CSS】perspective, transform-style, transform3d で奥行きののある配置を
|
1 2 3 4 5 6 7 8 | .container { overflow: hidden; -webkit-perspective: 2000px; perspective: 2000px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: relative; } |
背景とコンテンツを囲っている親要素に、perspectiveとtransfrom-style: preserve-3d を設定します。この２つを親要素に設定することで、直下の子要素を立体的に配置することができます。
また、背景の要素を余裕を持って配置するため、大きめにはみ出させるので、overflow:hidden を設定して、画面が横にスクロールするのを防止しておきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 | .bg { width: 200%; height: 200%; background: url(img/bg_body.jpg) no-repeat center center; background-size: cover; position: absolute; transform: translate3d(-25%, -25%, -1000px); } .contents { position: relative; transform: translate3d(0, 0, 0); } |
背景の要素は、画面の２倍サイズに設定し、translate3d で 1000px 奥へ（Z軸方向に）配置します。また、中央へ配置するので X軸、Y軸方向にも移動しておきます。これで、背景の端が見られてしまうのを防いだ上で、奥へ配置できます。
手前に来るメインのコンテンツには translate3d(0 ,0, 0) を設定します。
3.【JavaScript】スクロール時に transform-origin を移動して、パララックスを表現
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | $(function() { var isRunning = false, optimizedCallback = function() { changePerspective(); }; window.addEventListener("scroll", function() { if(!isRunning) { isRunning = true; window.requestAnimationFrame(function() { isRunning = false; optimizedCallback(); }); } }); window.addEventListener("touchmove", function() { if(!isRunning) { isRunning = true; window.requestAnimationFrame(function() { isRunning = false; optimizedCallback(); }); } }); var changePerspective = function() { $(".container").css({ "-ms-perspective-origin": "0% " + (window.scrollY / document.body.clientHeight * 100) + "%", "perspective-origin": "0% " + (window.scrollY / document.body.clientHeight * 100) + "%" }); } optimizedCallback(); }); |
最後に JavaScript (jQuery) で 親要素の perspective-origin をスクロール位置に応じて移動させます。
これで、スクロールする度に視点の位置が移動し、背景とコンテンツのパララックスをリアルに表現できます。
残念ながらIE11は transfrom-style: preserve-3d に対応していないため、この方法は使えないのですが、比較的簡単な方法ですので、是非お試しください。
Author Profile
SHARE
