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

2014/06/12

parallax

こんにちは。
今回は前回に続いてパララックスサイトの基本的な作り方です。

それでは早速前回の続きいっちゃいましょう〜!

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

ボックスを横方向にも動かす

htmlとcssは同じでjsのコードのみ記述します。

js

DEMO

 

最後にもうちょっと応用したサンプルを作りたいと思います。

 

背景画像を動かす

ボックスに背景画像を設定して動かしたいを思います。

html

 

css

 

js

DEMO

 

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

 

いかがでしたか。思ったより難しくないと思いますのでパララックスを取り入れてみてはどうでしょうか。
以上でパララックスサイトの基本的な作り方でした。

topへ戻る