パララックスサイトの基本的な作り方 1/2!

2014/06/11

parallax

こんにちは。
今回はパララックスサイトの基本的な作り方を紹介したいと思います。

去年くらいから流行始めたパララックスサイト。今年になってもその勢いは止まりません。
そんなパララックスサイトの基本的な作り方です。

 

パララックス(視差効果)とは

パララックス(視差効果)とは画像やテキスト等の個々の要素を別々に動かして視差効果で立体的にみせるテクニックです。

パララックスサイトの基本的な作り方 1/2!

準備をしよう!

htmlを用意します。
jQueryはjQueryのサイトから直接読み込みます。

 

スクロールした値を取得してみよう!

スクロールした値によって個々のボックスを移動させますので、スクロールした値を取得します。

html

 

css

 

js

 

DEMO

スクロールをすると右上の数値が大きくなると思います。

 

ボックスを別々に動かしてみよう!

取得したスクロールの値を使ってボックスを別々に動かしてみます。

html

 

css

 

js

 

DEMO

取得したスクロールの値に計算処理を加えてボックスのスピードを変えています。

 

実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」
実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」

 

今回はここまでです。
次回はもう少し応用したサンプルを作っていきます。

topへ戻る