イメージが固定されていて、スクロールした内容に応じてイメージが変化するjqueryをメモします。
jquery以外のプラグインは不要で、割と簡単にできちゃいます。
HTMLを記述する
HTMLを記述します。
<div class="wrap"> <div class="images-container"> <p class="scroll-area1"><img src="img/1.jpg" alt=""></p> <p class="scroll-area2"><img src="img/2.jpg" alt=""></p> <p class="scroll-area3"><img src="img/3.jpg" alt=""></p> <p class="scroll-area4"><img src="img/4.jpg" alt=""></p> </div> <div class="container"> <div class="scroll-area1"> <h2>DEMO TITLE1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, 略 mollit anim id est laborum.</p> </div> <div class="scroll-area2"> <h2>DEMO TITLE2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, 略 mollit anim id est laborum.</p> </div> <div class="scroll-area3"> <h2>DEMO TITLE3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, 略 mollit anim id est laborum.</p> </div> <div class="scroll-area4"> <h2>DEMO TITLE4</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisci elit, 略 mollit anim id est laborum.</p> </div> </div> </div>
wrap内にあるcontainerの中にある個々のブロックのスクロールに応じて、images-containerの中の固定されてイメージが変化します。
ブロックとイメージをリンクさせているクラスがscroll-area+NOとなります。
CSSを記述する
CSSを記述します。
.wrap{
width:100%;
margin:0 auto;
text-align:center;
padding:200px 0;
position: relative;
display: flex;
justify-content: space-between;
position: relative;
background: #fff;
}
/*コンテンツ*/
.container {
width: 40%;
}
.container div {
padding-top: 50vh;
padding-right:10vh
}
.container div:last-child {
padding-bottom: 50vh;
}
.container div h2 {
font-size: 3rem;
text-align:left;
}
.container div p {
margin-top: 30px;
text-align:left;
line-height:170%;
}
/*イメージ*/
.images-container {
width: 55%;
height: 100vh;
display: flex;
align-items: center;
position: sticky;
position: -webkit-sticky;
top:0;
}
.images-container img {
max-width: 100%;
height: auto;
}
.images-container p {
height:650px;
margin: auto;
display: block;
visibility: hidden;
position: absolute;
top: 0;
bottom: 0;
transition: .8s !important;
opacity: 0;
}
.images-container p:first-child,
.images-container p.active {
visibility: visible;
opacity: 1;
}
イメージが入っている、images-containerの幅と高さを設定します。height: 100vhで全画面固定し、さらにposition: stickyを使用してスクロール固定します。
ここで蛇足ですが、position: stickyの注意点をメモしておきます。
- 最新のFirefox、Chrome、Safari、Edgeでサポート
- 親要素にoverflow: hiddenを入れない
- Chromeではtheadとtr要素でstickyが使えない
- Safariではプレフィックスが必要（position: -webkit-sticky）
- IEはサポートしていない
IEが曲者ですが、2023年3月時点でシェア0.46%ですから、stickyについてはスルーしちゃいます！
話を戻します。
.images-container pにtransitionプロパティでイメージが切り替わる際のフェードインアニメーションを設定します。また、visibility: hiddenで不可視状態にします。
.images-container p:first-childで最初のイメージ、.images-container p.activeでスクロールで表示されたイメージをvisibility: visibleで表示します。
javascriptを記述する
javascriptを記述します。
$(function(){
$(window).scroll(function () {
$('.container div').each(function () {
boxNum = $(this).attr("class"),
scrollTop = $(window).scrollTop();
areaTop = $(this).offset().top;
if (scrollTop > areaTop) {
$('.images-container .' + boxNum).addClass('active');
} else{
$('.images-container .' + boxNum).removeClass('active');
}
});
});
});
.container div内のclass、scroll-area+NOを取得して、スクロール後images-container内のscroll-area+NOと同じクラスになったら、.activeを追加し表示、外れたら削除し非表示にします。
以上です。
簡単でした。
