<script>
$(function(){
bodyTop = $('body').scrollTop();
console.log(bodyTop);
});
</script>
これだと読みこまれた1回しか数値を吐き出さない
0のまま
<script>
$(window).scroll(function(){
bodyTop = $('body').scrollTop();
console.log(bodyTop);
});
</script>
windowには""をつけなくていい
thisみたいなもの
divなら"div"とする必要があり
<script>
$("div").scroll(function(){
bodyTop = $('body').scrollTop();
console.log(bodyTop);
});
</script>
さて位置を取るにはwindowをつかう。
<script>
$(function(){
$(window).scroll(function(){
bodyTop = $(window).scrollTop();
console.log(bodyTop);
});
});
</script>
赤を固定する
<script>
$(function(){
$(window).scroll(function(){
bodyTop = $(window).scrollTop();
$('div.red').css('top',bodyTop+'px');
console.log(bodyTop);
});
});
</script>
div.redの位置をbodyTopにしておいてねと
→固定したように見える
一方、
$(function(){
$(window).scroll(function(){
bodyTop = $(window).scrollTop();
redTop=bodyTop*3;
$('div.red').css('top',redTop+'px');
console.log(bodyTop);
});
});
こうするとどうなるかというと、
redTopが3倍でy座標がふえるので
スクロールするたびにめっちゃ速く下に動くように見える
$(function(){
$(window).scroll(function(){
bodyTop = $(window).scrollTop();
blueTop=bodyTop*2;
redTop=bodyTop*3;
$('div.red').css('top',redTop+'px');
$('div.blue').css('top',blueTop+'px');
console.log(bodyTop);
});
});
2倍と3倍でスクロールスピードが変わっているように見える
--->para.html
<!DOCTYPE html>
<html lang=ja">
<head>
<meta charset="utf-8">
<title>なんちゃってパララックス</title>
<link rel="stylesheet" href="style.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<h1>なんちゃってパララックス</h1>
<div class="red">
<div class="white"></div>
<div class="white2"></div>
<div class="white3"></div>
</div>
<div class="blue">
<div class="white"></div>
<div class="white2"></div>
<div class="white4 rotate_r"></div>
<div class="white5 rotate_l"></div>
</div>
<script>
$(function(){
$(window).scroll(function(){
bodyTop = $(window).scrollTop();
redTop=-(bodyTop)*3+500;
blueTop=-(bodyTop)*2+500;
$('div.red').css('top',redTop+'px');
$('div.blue').css('top',blueTop+'px');
console.log(bodyTop);
});
});
</script>
</body>
</html>
-->style.css
@charset "utf-8";
body{
height:1000px;
}
h1{
text-align: center;
}
div{
width:200px;
height:200px;
position: absolute;
}
div.red{
background-color:red;
top: 200px;
left: 0;
}
div.blue{
background-color:blue;
top: 200px;
left: 250px;
}
div.white{
background-color:white;
width:10px;
height:50px;
top: 20px;
left: 50px;
}
div.white2{
background-color:white;
width:10px;
height:50px;
top: 20px;
left: 140px;
}
div.white3{
background-color:white;
width:140px;
height:10px;
top: 120px;
left: 30px;
}
div.white4{
background-color:white;
width:70px;
height:10px;
top: 120px;
left: 32px;
}
div.white5{
background-color:white;
width:70px;
height:10px;
top: 120px;
left: 98px;
}
.rotate_r {
transform:rotate(15deg);
}
.rotate_l {
transform:rotate(-15deg);
}
これをまとめてプラグインになったのがある
もちろんそれをポンと使うこともできるが
この部分をちょっと書き換えたらこうなるじゃないかとか
そういうのが可能になるので
仕組みを理解するのは大事
検証ツール
hoverはここで確認できる
