パララックス スクロールで動かす 【jQuery】

◆スクロールの上からの位置を取得

「.text」に取得したスクロールの位置を置き換える

スクロールする必要があるのでCSSで高さを適当にいれる

「.text」をCSSで動かさないようにする。

*html側

<p class="text">スクロール</p>

*CSS側

body{
height:1000px;
}

p.text{
position:fixed;
top:10px;
left:10px;
}

*js側

$(window).scroll(function(){
 $(".text").text($(window).scrollTop());
});

$(window).scroll…スクロールしながら

$(window).scrollTop()…上からの位置を取得

↑の位置情報を変数の中にいれてあげると、かけたりわったりできる。

$(window).scroll(function(){
 var yy=$(window).scrollTop();
 $(".text").text(yy+":"+yy/2);//連結
});

↓スクロールすると「★」が縦にならんで出てくる
→

*js側

 $("#box1").css("top",yy);
 $("#box2").css("top",yy-15);
 $("#box3").css("top",yy-30);
 $("#box4").css("top",yy-45);

「★」にそれぞれIDをふってずらす。

横に動かしたいときは、leftにかえる



↓スクロールすると背景がうごく

 $("#box1").css("backgroundPosition",'10px '+yy+'px');

※半角のスペースをいれないと動かない


------------------参考サイト------------------
パララックスの作り方
http://webdrawer.net/javascript/parallax.html