jqueryで固定フルページスクロールさせる

TIPS 0 Takuya Kobayashi

紙を重ねるように下から上にスクロールするやつ。デモ

ペラペラスクロール領域がが終わったら通常スクロールになる。

ScrollMagicを使用。

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script>$(function(){
var controller = new ScrollMagic.Controller({
globalSceneOptions:{
triggerHook: 'onLeave',
duration: '100%',
}
});
var slides = $('.js-fullpage');
for(var i=0; i<slides.length; i++){
new ScrollMagic.Scene({
triggerElement: slides[i]
})
.setClassToggle(slides[i], 'active')
.setPin(slides[i], {pushFollowers:false})
.addTo(controller);
}
});
</script>

<section class="fullpage page-1 js-fullpage">
<div>
<h2 class="title">このタイトルはダミーです</h2>
<p>この文章はダミーです。</p>
</div>
</section>
<section class="fullpage page-2 js-fullpage">
<div>
<h2 class="title">このタイトルはダミーです</h2>
<p>この文章はダミーです。</p>
</div>
</section>
<section class="fullpage page-3 js-fullpage">
<div>
<h2 class="title">このタイトルはダミーです</h2>
<p>この文章はダミーです。</p>
</div>
</section>
<div class="footer">
<section class="section">
<div>
内容
</div>
</section>
<section class="section">
<div>
内容
</div>
</section>
(略)
</div>

* { max-width:100%; font:inherit; padding:0; margin:0; }
.fullpage { position:relative; z-index:0; height:100vh; }
.fullpage > div { position:absolute; top:50%; left:0; right:0; max-width:830px; padding:0 15px; margin:auto; transform:translateY(-50%); }
.fullpage.page-1 { color:#fff; background:red; }
.fullpage.page-2 { color:#fff; background:orange; }
.fullpage.page-3 { color:#000; background:yellow; }
.title { font-size:2rem; font-weight:bold; text-align:center; margin-bottom:1em; }
.section { padding:60px 0; background:#fff; }
.section > div { max-width:830px; padding:0 15px; margin:auto; }
.footer { position:relative; z-index:1; }

参考までに。

--
以上