Blog

CSS3のPerspectiveを使ったパララックス

Web ページに奥行きを感じさせて使い方によってはユーザー体験を向上させることを期待できるパララックスが登場して久しいですが、その実装方法は多岐にわたります。

JavaScript のライブラリーを使った方法が広く使われていますが、
今回は CSS3 の Perspective と JavaScript を組み合わせた方法を考えてみましたので、
ご紹介いたします。

↓作ってみたもの
DEMO

 

方法

  1. 【HTML】背景とコンテンツを配置
  2. 【CSS】perspective, transform-style, transform3d で奥行きののある配置を
  3. 【JavaScript】スクロール時に transform-origin を移動して、パララックスを表現

 

1.【HTML】背景とコンテンツを配置

背景になる要素と、表に来るメインのコンテンツを同じ階層上に配置し、
それをdivなどの親要素で囲みます。

 

2.【CSS】perspective, transform-style, transform3d で奥行きののある配置を

背景とコンテンツを囲っている親要素に、perspectiveとtransfrom-style: preserve-3d を設定します。この2つを親要素に設定することで、直下の子要素を立体的に配置することができます。
また、背景の要素を余裕を持って配置するため、大きめにはみ出させるので、overflow:hidden を設定して、画面が横にスクロールするのを防止しておきます。

背景の要素は、画面の2倍サイズに設定し、translate3d で 1000px 奥へ(Z軸方向に)配置します。また、中央へ配置するので X軸、Y軸方向にも移動しておきます。これで、背景の端が見られてしまうのを防いだ上で、奥へ配置できます。

手前に来るメインのコンテンツには translate3d(0 ,0, 0) を設定します。

 

3.【JavaScript】スクロール時に transform-origin を移動して、パララックスを表現

最後に JavaScript (jQuery) で 親要素の perspective-origin をスクロール位置に応じて移動させます。
これで、スクロールする度に視点の位置が移動し、背景とコンテンツのパララックスをリアルに表現できます。

残念ながらIE11は transfrom-style: preserve-3d に対応していないため、この方法は使えないのですが、比較的簡単な方法ですので、是非お試しください。

Author Profile

ninomiya
ninomiya
Webデザイナー兼コーダーです。 イラストを描くのも好きです。 SVGとCanvasを使ったWEBアプリにも興味があります。 よろしくお願いいたします。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ