パララックス（parallax）は直訳すると視差という意味です。
スクロールすると同時に次のコンテンツが覆いかぶさるような、不思議な動きをし、奥行きやストーリー性を出してくれる効果があります。
今回はそんなパララックスサイトを作っていきます。
デモページ
まずはデモページで完成品の確認です。
3枚の画像がパララックスで流れた後、「パララックスデザイン」という文字がふわっとでてきます。
パララックスの作り方
パララックスのHTML
まずはHTMLです。サイトのコンテンツは一旦置いといて、パララックスの仕組みを作ります。
<body>
<div id="bg1" class="box"></div>
<div id="bg2" class="box"></div>
<div id="bg3" class="box"></div>
<div id="msg" class="box">パララックスデザイン</div>
</body>サイトの中身はこの<div></div>の中に書いていきます。
パララックスのCSS
続いてCSS。
body{
margin:0;
padding:0;
height:4000px;
}
.box{
padding:0;
margin:0;
width:100%;
height:800px;
}
#bg1{
background:url('img/bg1.jpg') no-repeat;
}
#bg2{
background:url('img/bg2.jpg') no-repeat;
}
#bg3{
background:url('img/bg3.jpg') no-repeat;
}
#msg{
font-size:48px;
font-weight:bold;
font-family:'Verdana','Arial';
color:orange;
opacity:0;
position:fixed;
}#bg1,#bg2,#bg3にそれぞれ背景画像を入れます。
cssでは#msgのopacityを0に指定しておきます。
パララックスのjQuery
$(function(){
$(window).scroll(function(){
var roll = $(this).scrollTop();
console.log(roll);
$('#bg1').css('background-position', '0 '+roll+'px');
if(roll > 800){
$('#bg2').css('background-position', '0 '+(roll-800)+'px');
}else{
$('#bg2').css('background-position', '0 0');
}
if(roll > 1600){
$('#bg3').css('background-position', '0 '+(roll-1600)+'px');
}else{
$('#bg3').css('background-position', '0 0');
}
if(roll > 1600){
$('#msg').css('opacity', (roll-1600)/800);
$('#msg').css('top',500);
}else{
$('#msg').css('opacity', 0);
}
});
});少し長いですが大丈夫です。落ち着いてください。
ブロックに分けて見ていきましょう。
まずは下記。
$(function(){
$(window).scroll(function(){
var roll = $(this).scrollTop();
});
});スクロールさせた時に何かしなさいという命令が
$(window).scroll(function(){……});
になります。
何をするかというと、ブラウザ全体のスクロール値がほしいので
$(this).scrollTop();
で取得してあげます。
その値をrollという変数を作って代入してあげます。
$('#bg1').css('background-position', '0 '+roll+'px');
if(roll > 800){
$('#bg2').css('background-position', '0 '+(roll-800)+'px');
}else{
$('#bg2').css('background-position', '0 0');
}
if(roll > 1600){
$('#bg3').css('background-position', '0 '+(roll-1600)+'px');
}else{
$('#bg3').css('background-position', '0 0');
}続いてこの部分。
画像にbackground-positionを使って、x方向（横方向）とy方向（縦方向）の数値を指定します。
y方向（縦方向）にスクロールした分ずらしてあげると画像は動かないようにみえます。
例えば10pxスクロールしたら、上から10px画像自体を動かしてあげます。
x方向（横方向）は動かさなくていいので０を指定します。
なので‘0 ‘+roll+’px’。
2枚目の画像は上から800pxの位置にあるので、800pxより大きくなったら処理してあげるように‘0 ‘+(roll-800)+’px’というように指定します。
3枚目も同じ考え方で指定します。
if(roll > 1600){
$('#msg').css('opacity', (roll-1600)/800);
$('#msg').css('top',500);
}else{
$('#msg').css('opacity', 0);
}最後にこの部分。
これは横にスクロールする動きです。
画像の3枚目が現れた時から変化を起こしたいのでif(roll > 1600)とします。
#msgのcssでopacityを0にしましたが、ここで800pxスクロールすると1になるように指定します。
これでふわっと文字がでてきます。
