多重スクロール背景で奥行きを表現する

多重スクロール背景で奥行きを表現する – メディアデザイン実習J商用サイトの実例

前提
背景画像を、複数層(レイヤー)用意しておく。
動作としては、手前の層のほうが早く動き、奥のほうが遅く動くようにする。
 

考え方
ページのスクロール量が変化するごとに、それぞれの背景を異なるスクロール量変化させる。
移動量がそれぞれ異なる →「違う速度で動いている」
スクロール量をそれぞれ異なる数値で割り算すればよい。
 

HTML

 

CSS

 

JavaScript (jQuery使用)

 
Have Fun !(^o^)




コメントを残す

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