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

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

※当サイトはアフィリエイト広告を利用していますが、当サイトが独自に作成した記事であり、第三者から依頼を受けたものではありません。

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

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

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

js

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

$(‘#box1’).css(‘top’, pos1.top + value / 2);
$(‘#box1’).css(‘left’, pos1.left + value / 8);

$(‘#box2’).css(‘top’, pos2.top + value / 4);
$(‘#box3’).css(‘left’, pos2.left + value / 6);

$(‘#box3’).css(‘top’, pos3.top + value / 6);
$(‘#box3’).css(‘left’, pos3.left + value / 4);

$(‘#box4’).css(‘top’, pos4.top + value / 8);
$(‘#box4’).css(‘left’, pos4.left + value / 2);

});
});
[/javascript]

DEMO

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

背景画像を動かす

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

html

[html]

背景画像を動かす

スクロールの値 | 0

[/html]

css

[css]
body {
height: 5000px;
}
.num {
margin: 0;
position: fixed;
right: 10px;
top: 10px;
}
.box {
height: 800px;
margin: 0;
padding: 0;
}
#box1 {
background: url(“../img/box1.jpg”) no-repeat;
}
#box2 {
background: url(“../img/box2.jpg”) no-repeat;
}
#box3 {
background: url(“../img/box3.jpg”) no-repeat;
}
#box4 {
background: url(“../img/box4.jpg”) no-repeat;
}
[/css]

js

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

$(‘#box1’).css(‘background-position’, ‘0 ‘+ value +’px’);

if (value > 800) {
$(‘#box2’).css(‘background-position’, ‘0 ‘+ (value – 800) +’px’);
} else {
$(‘#box2’).css(‘background-position’, ‘0 0’);
}

if (value > 1600) {
$(‘#box3’).css(‘background-position’, ‘0 ‘+ (value – 1600) +’px’);
} else {
$(‘#box3’).css(‘background-position’, ‘0 0’);
}

if (value > 2400) {
$(‘#box4’).css(‘background-position’, ‘0 ‘+ (value – 2400) +’px’);
} else {
$(‘#box4’).css(‘background-position’, ‘0 0’);
}
});
});
[/javascript]

DEMO

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

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