jQueryで奥行きのある背景スクロールを作ってみる

画像を手前は早く、奥は遅く移動 デモを見て頂ければわかると思いますが、やってることは手前の背景画像を早く動かし、奥の画像を遅く動かしているだけです。 html + css 画像は当然ですが2枚以上用意しましょう。 ここでは3枚画像の画像を使用します。 なのでdivを3つ用意し、それぞれに背景画像を指定します。 html <div id="bg03"> <div id="bg02"> <div id="bg01"> <!-- /#bg01 --></div> <!-- /#bg02 --></div> <!-- /#bg03 --></div> css #bg01 { background: url(bg1.png); height: 3000px; } #bg02 { background: url(bg2.png); } #bg03 { background: url(bg3.png);

[civatan55]

これが俗にいうパララックス効果？

[indigoworks]

パララックスの作り方って案外検索しても出てこねーなー　やっぱりJSエンジニアさんたちが高単価維持するために秘匿されてんのかな、って思ってたら、あった。しかも結構簡単ぽい

[sugi511]

スクロールするときに背景画像の前後によって移動させるスピードを変える。

[site159]

思わず　これだけか　といってしまったぐらいシンプル　これだけですめばいいなぁ

[sometk]

パララックス

[rcorco]

パララックス

[duckclogs]

スクロール

[albicetus]

パララックス効果

[kyaraway]

パララックス効果の作り方。いつかやってみる

[ukn]

パララックス

[keikoyamada1223]

jQueryで奥行きのある背景スクロールを作ってみる

[GOONEE]

多重スクロール。

[hisaodehateb]

jQueryで奥行きのある背景スクロールを作ってみる webOpixel

[boyasan]

ほお