皆様、ごきげんよう。
2014-08-01 勉強会
前回、skrollrを実装し、画像やテキストなどの要素をスクロール量に応じて動かす方法を確認しました。そして今回は背景画像の動きを操作して遠近感を出す事によって、パララックスを実現する方法を確認しました。
遠近感を出す為に複数の背景画像をずらす
skrollrの指定
skrollrのこちらのdemo parallax scrolling for the massesの背景画像を再現してみました。
勉強会のdemoはこちら > parallax-by-skrollr
bodyのすぐ直下の2つのdiv “bg1″と”bg2” に背景画像を指定する
demoでは3層の水玉ですが、2層でも仕組みは確認できます。2つのdivを用意したら、skrollrで、スクロール量に応じた背景画像の動きを”background-position”で指定します。
background-positionについて
background-positionプロパティは、背景画像の表示開始位置を指定するプロパティです。
HTMLクイックリファレンス
とほほのスタイルシート入門
HTMLタグ・CSS・テンプレート – Web制作のインデックスサイト
各divに、skrollr用のdata属性をつけて、”background-position”をコントロールします。
1 2 3 4 5 6 7 8 9 10 11 |
<div id="bg1" data-0="background-position:0px 0px;" data-2000="background-position:50px -1000px;">手前に見える </div> <div id="bg2" data-0="background-position:0px 0px;" data-2000="background-position:10px -700px;"> <br>奥に見える </div> |
divはスクロールしても動かない様に、”position: fixed;”を指定して固定します。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
* { box-sizing:border-box; } html,body { height:100%; } body { overflow-x:hidden; } div { padding:5em; position:fixed; top:0; left:0; height:100%; width:100%; } #bg1 { background: url(http://prinzhorn.github.io/skrollr/examples/images/bubbles.png) repeat 0 0 scroll; } #bg2 { background: url(http://prinzhorn.github.io/skrollr/examples/images/bubbles2.png) repeat 0 0 scroll; } |
divはスクロールで動きませんが、skrollrによって、背景画像が動きます。このとき、手前に見せたい#bg1の移動量を、#bg2よりも大きくします。
スクロールした時に、近い物ほど速く、遠くの物ほど遅く動いて見えるようにすると、そこに「視差」が生まれて、遠近感を感じさせることができる、という訳です。
さらに画像やテキストなどの要素を合わせて、それぞれ動きを操作することによってdemoのようなパララックスサイトにすることが出来ます。
パララックスと遠近法について
「パララックス」は動きを伴った遠近法です。車窓から見える景色は、近くの物が速く、遠くの物が遅く動いて見えます。webデザインで「パララックス」が流行ったのは、ランディングページやプロモーションサイトなどで縦長にレイアウトしたページのコンテンツを、最後まで興味を持続させながら下へ下へとスクロールしてもらう「動機付け」として秀逸だったからです。
ちなみに、今回パララックスさせた背景画像は、水玉の色の濃さがすこし違います。これも遠近法のひとつで、遠くのものほど青くかすんで見える「空気遠近法」が使われています。
空気遠近法と色彩遠近法は混同されることが多いが、実際には、色彩遠近法は空気遠近法の一部(例:大気の影響で、遠くの方ほど青みがかっているなど)に使われている技法であり、同じではない。
それでは、ごきげんよう。
ピンバック: パララックスが簡単に実装出来る!skrollrの使い方 | Freyja's Ramblings