こんにちは。
今回はパララックスサイトの基本的な作り方を紹介したいと思います。
去年くらいから流行始めたパララックスサイト。今年になってもその勢いは止まりません。
そんなパララックスサイトの基本的な作り方です。
パララックス（視差効果）とは
パララックス（視差効果）とは画像やテキスト等の個々の要素を別々に動かして視差効果で立体的にみせるテクニックです。
※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。
パララックスサイトの基本的な作り方 1/2！
準備をしよう！
htmlを用意します。
jQueryはjQueryのサイトから直接読み込みます。
[html]
[/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]
スクロールをすると右上の数値が大きくなると思います。
ボックスを別々に動かしてみよう！
取得したスクロールの値を使ってボックスを別々に動かしてみます。
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]
取得したスクロールの値に計算処理を加えてボックスのスピードを変えています。
実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」
今回はここまでです。
次回はもう少し応用したサンプルを作っていきます。
