皆様、ごきげんよう。 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”で指定します。