3
ウェブを探索すると、このサイトにこの驚くべき効果が見つかりました。http://www.guglieri.com/ （スクロール効果） 同じ効果を再現するスクリプトを作成したいと思います。スクロールする固定部分
基本的には、各セクションの位置プロパティを「絶対」に設定して、ボディの高さを各セクションの高さに合わせて計算するようになりました。
ここで考えているのは、それぞれのオフセットを配列に保存することです。スクロールトップがメジャーまたはこのオフセットに等しいとき...私はtranslateYプロパティを使用してセクションを一番上に移動し始めます。ビューポートの高さと等しくなります。しかし今、私は立ち往生しています！
私はすでに既存のプラグインを探していましたが、何も見つかりませんでした。それは、視差効果だ
var
body = $('body')
section = $('section');
section.each(function(i,el){
$(el).css({
'z-index' : section.length - i
})
body.height(body.height()+$(el).height());
});body {
margin: 0;
}
section {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
font-family: sans-serif;
}
section.a {
background-color:indianred
}
section.b {
background-color:royalblue
}
section.c {
background-color:deepskyblue
}
section.d {
background-color:tomato;
}
section div {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
font-size: 6em;
color: #FFF;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<section class="a">
<div>a</div>
</section>
<section class="b">
<div>b</div>
</section>
<section class="c">
<div>c</div>
</section>
<section class="d">
<div>d</div>
</section>