動くCSSのためのメモ。
パララックス

JavaScriptでパララックスな表現をする場合には、要素ごとにスクロールスピードを変えることで、視差効果を生み出してたと思いますが、CSSではtransformの3D表現を使って、要素を実際に画面の手前と奥に配置することで、パララックスを表現できます:)※Internet ExplorerとFirefoxでは確認できませんX(

手前にパララックス

ドロワーメニューの時と同じコンテンツを使って、下図のような感じに、手前から、アイキャッチ画像、ヘッダーナビ、リンクボタン、タイトルの順になるように、要素を手前に移動させてみます。

各要素を手前に移動させる

要素を手前へ移動させるにはtransformプロパティtranslateZ()を使います。
それから親要素には、奥行きを決めるためのperspectiveプロパティを指定します。ここではperspective: 200pxとして、200px離れたところから見てる感じにします。
奥行きの基準点(消失点)は、transform-originプロパティの初期値「親要素の中央」になるはずです。

.parallax #wrapper {
	perspective: 200px;
}

けど、上手くいきませんね…。
要素はちゃんと手前に移動してるみたいですけれど、奥行きの基準点がサイト全体の中心になってるので、全体的に縦に広がっちゃってます。しかも基準点ごとスクロールしてるので、パララックスしないわけです…X(
サイト全体の中心じゃなくて、下図みたく、常にウィンドウの中心が基準になるようにすれば、上手くパララックスするはずです…!

コンテンツの中心じゃなくて、ウィンドウの中心を基準にしたい

ということで、親要素の#wrapperをウィンドウと同じ大きさになるよう、下記指定を加えます。
それから、#wrapperにはoverflow: autoと指定して、#wrapperの中でコンテンツがスクロールするようにします。

html, body, #wrapper {
	height: 100%;
}
#wrapper {
	overflow: auto;
}

これで、下図のような構造になりました。
#wrapperはウィンドウの大きさに固定され、その中身だけ、#wrapperの中でスクロールします。

#wrapperは動かない、中のコンテンツだけスクロール

ちゃんとパララックスするようになりましたね:D

けれど、手前のものほど大きくなっちゃってるので臨場感だけすごいです…。できれば各要素の大きさは元通りにしたいですね。transformプロパティscale()を指定して、要素の大きさを調整してみたいと思います。

視点から要素までの距離と、大きさの関係は下図みたいになると思います。距離が近づくほど、反比例して大きくなって見えるんですねー。

横から見た図と大きさの調整方法

例えば、400px離れたところにある要素は、実際の大きさの半分に見えてる事になるので、元の大きさに戻すには、2倍に拡大すればよいという事になります。
100pxのところにある要素なら、2倍の大きさに見えてるので、元の大きさに戻すには、2分の1に縮小(0.5倍)すればよいという事になります。
つまり「要素までの距離 / 基準の距離 = 拡大する値」ということになりますね!

アイキャッチ画像の場合なら、60px手前に移動してるから、要素までの距離は140pxなので、「140px / 200px = 0.7」。現在の大きさから「0.7」倍すれば元の見ための大きさに戻るということです。
てなもんで、transformの値にscale()を追記します。

figure img {
	transform: translateZ(60px) scale(.7);
}

他の要素も同じ要領で、元の見た目の大きさになるように調整すれば、できあがり:D

ページトップへ戻る

奥にパララックス

手前に配置した要素は通常よりも早くスクロールしてましたが、奥に配置すれば、通常よりも遅くスクロールする事になります。
下のサンプルは、各要素の重なり方が、上のサンプルとは逆順になるよう配置してます。

画面の横幅が狭い時に、横スクロールバーが出ちゃいますね…。
translateX()で手前に移動させて大きく見える時には、要素自体の大きさは変わらないので、スクロールバーは出ませんでしたが、scale()拡大した時には、要素自体が大きくなるため、#wrapperからハミ出た分スクロールバーが出ちゃうんですね。

見た目は元のサイズだけど、要素自体は拡大してる

ここでは#wrapperoverflow-y: hiddenと指定して、横スクロールバーだけ出ないようにしました;P
で、できあがり!

おわりに

記事を書いてる最中にもいろいろ新たな発見とかがあって紆余曲折しながらすごくすごく長くなっちゃいましたが、なんとかキリが着けれてよかったです;D
たぶん今後もっとよりよい書き方に気付いたり、新しい技術が出てくると思うので、どんどん更新していきたい所存です。

最後に、動くCSSを使ってサンプルのサンプルサイトを作ってみましたー:D。
記事で紹介したCSSをいろいろ盛り込んでますので、ぜひ覗いて行ってくださいな。

動くCSSのためのメモ。 - Lopan cafe

以上、動くCSSのためのメモでしたー。
最後まで読んでいただきありがとうございました!

Comment & Pingback

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください