パララックス2

skrollr.jsで背景をパララックスしてみた

皆様、ごきげんよう。

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”をコントロールします。

divはスクロールしても動かない様に、”position: fixed;”を指定して固定します。

divはスクロールで動きませんが、skrollrによって、背景画像が動きます。このとき、手前に見せたい#bg1の移動量を、#bg2よりも大きくします。

スクロールした時に、近い物ほど速く、遠くの物ほど遅く動いて見えるようにすると、そこに「視差」が生まれて、遠近感を感じさせることができる、という訳です。

さらに画像やテキストなどの要素を合わせて、それぞれ動きを操作することによってdemoのようなパララックスサイトにすることが出来ます。

パララックスと遠近法について

OLYMPUS DIGITAL CAMERA

「パララックス」は動きを伴った遠近法です。車窓から見える景色は、近くの物が速く、遠くの物が遅く動いて見えます。webデザインで「パララックス」が流行ったのは、ランディングページやプロモーションサイトなどで縦長にレイアウトしたページのコンテンツを、最後まで興味を持続させながら下へ下へとスクロールしてもらう「動機付け」として秀逸だったからです。

ちなみに、今回パララックスさせた背景画像は、水玉の色の濃さがすこし違います。これも遠近法のひとつで、遠くのものほど青くかすんで見える「空気遠近法」が使われています。

空気遠近法と色彩遠近法は混同されることが多いが、実際には、色彩遠近法は空気遠近法の一部(例:大気の影響で、遠くの方ほど青みがかっているなど)に使われている技法であり、同じではない。

「色彩遠近法」と「空気遠近法」より

それでは、ごきげんよう。

カテゴリー: 勉強会 | タグ: , | 投稿日: | 投稿者:
ジェイ子

ジェイ子 について

WAVE立川校に2010年の3月〜8月に通っていました。取得コース名は『WEBプロフェッショナル&グラフィックコース、WEBディレクション講座』WAVE在籍は2012年11月まででした。2010年9月以降はWEBから遠ざかっていたのですが、真中さんやかおりんごさんや高橋先生のおかげで倶楽部りんごに参加できたので、また1から勉強し直しています。そしてWEBデザイナーを目指して頑張ろうと思っています。

skrollr.jsで背景をパララックスしてみた」への1件のフィードバック

  1. ピンバック: パララックスが簡単に実装出来る!skrollrの使い方 | Freyja's Ramblings

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA