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

2014/06/11

parallax

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

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

 

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

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

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

準備をしよう!

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

[html]




パララックスサイト1




[/html]

 

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

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

html

[html]




スクロールの値を取得

スクロールの値を取得

スクロールの値 | 0





[/html]

 

css

[css]
body {
height: 5000px;
}
.num {
margin: 0;
position: fixed;
right: 10px;
top: 10px;
}
[/css]

 

js

[javascript]
$(function() {
$(window).scroll(function() {
var value = $(this).scrollTop(); //スクロールの値を取得
$(‘#scrollValue’).text(value);
});
});
[/javascript]

 

DEMO

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

 

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

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

html

[html]




ボックスを別々に動かす

ボックスを別々に動かす

スクロールの値 | 0





[/html]

 

css

[css]
body {
height: 5000px;
}
.num {
margin: 0;
position: fixed;
right: 10px;
top: 10px;
}
.box {
position: fixed;
top: 90px;
width: 100px;
height: 100px;
}
#box1 {
background: #fe2902;
left: 10px;
}
#box2 {
background: #fe7833;
left: 120px;
}
#box3 {
background: #feb468;
left: 230px;
}
#box4 {
background: #fee09c;
left: 340px;
}
[/css]

 

js

[javascript]
$(function() {
var top = $(‘#box1’).offset().top; //初期値を取得
$(window).scroll(function() {
var value = $(this).scrollTop(); //スクロールの値を取得
$(‘#scrollValue’).text(value);

$(‘#box1’).css(‘top’, top + value / 2);
$(‘#box2’).css(‘top’, top + value / 4);
$(‘#box3’).css(‘top’, top + value / 6);
$(‘#box4’).css(‘top’, top + value / 8);
});
});
[/javascript]

 

DEMO

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

 

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

 

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

この記事を読んだ人はこんな記事も読んでいますよ