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

2014/06/12

parallax

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

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

パララックスサイトの基本的な作り方 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フレームワークでサクサクつくる「動き」と「仕掛け」
実践Webデザイン jQuery+CSSフレームワークでサクサクつくる「動き」と「仕掛け」

 

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

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