前提・実現したいこと
https://plus-d.co.jp/
上記のようにsectionごとに1ページスクロールをフェード切り替えし
最後のsectionを縦幅可変にしたTOPページを制作しています。
縦幅可変にした最後のsectionでは、sectionの1番上にきた時にさらに上にスクロールすると前のsectionに戻るようにしたいのですが、section内の途中で上スクロールすると前のsectionに戻ってしまいます。
どなたかお優しい方のご回答をお待ちしております。
発生している問題
色々と試してsectionごとに1ページスクロールをフェード切り替え&最後のsectionを縦幅可変にするところまではできました。 最後のsectionの1番上にきた時にさらに上にスクロールすると前のsectionに戻るようにするところがどうしたらいいのか分かりません。
該当のソースコード
HTML
1<script src="//code.jquery.com/jquery-2.2.4.min.js"></script> 2<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script> 3<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.5/lodash.min.js"></script> 4 5<div id="wrap" class="onscroll"> 6 7<main> 8 9<section id="section-1" class="section section-1"> 10セクション1の内容 11</section> 12 13<section id="section-2" class="section section-2"> 14セクション2の内容 15</section> 16 17<div id="section-3" class="section section-3"> 18<section> 19セクション3の内容 20</section> 21 22<footer> 23フッターの内容 24</footer> 25 26</div> 27 28</main> 29</div>
css
1section{ 2 position: relative; 3 z-index:1; 4 width:100%; 5 height: 100vh; 6 box-sizing:border-box; 7 overflow: hidden; 8} 9 10#section-1 { 11 opacity:0; 12} 13#section-1.visible { 14 opacity:1; 15} 16.section-2 { 17 opacity: 1; 18} 19.section-3 { 20 opacity: 1; 21} 22.section-1 { 23 height: 100vh; 24} 25 26#section-1.on { 27 animation: fadeIn 1s; 28 animation-fill-mode: forwards; 29} 30#section-1.none { 31 position: absolute; 32 top: -100%; 33} 34 35#section-1.on, #section-1.visible { 36 display: block; 37} 38 39#section-1.off { 40 display: block; 41 animation: fadeOut 0.5s ease 1s; 42 animation-fill-mode: backwards; 43} 44 45.section-2 { 46 position: absolute; 47 top: -100%; 48 text-align: right; 49} 50 51#section-2.on, #section-2.visible { 52 display: block; 53 top: 0; 54} 55 56#section-2.off { 57 display: block; 58 top: 0; 59 animation: fadeOut 0.5s ease 1.5s; 60 animation-fill-mode: backwards; 61} 62 63#section-3 { 64 position: absolute; 65 left: -100%; 66 width: 100%; 67} 68 69#section-3.on, #section-3.visible { 70 display: block; 71 left: 0%; 72} 73 74#section-3.off { 75 display: block; 76 left: 0%; 77 animation: fadeOut 0.5s ease 1.5s; 78 animation-fill-mode: backwards; 79}
js
1if (window.matchMedia( '(min-width: 769px)' ).matches) { 2 this.$container = document.getElementById('section-1'); 3 this.$container.addEventListener('wheel', _.throttle((e)=>{ 4 e.preventDefault(); 5 if(e.deltaY < 0) { 6 } else if(e.deltaY > 0) { 7 $('#section-1').addClass("off"); 8 $('#section-1').removeClass("visible"); 9 $("#section-2").delay(1300).queue(function() { 10 $(this).addClass("on").dequeue(); 11 }); 12 $("#section-1").delay(1500).queue(function() { 13 $(this).removeClass("off").dequeue(); 14 $(this).addClass("none").dequeue(); 15 }); 16 $("#section-2").delay(2300).queue(function() { 17 $(this).addClass("visible").dequeue(); 18 $(this).removeClass("on").dequeue(); 19 }); 20 } 21 return false; 22 }, 6600, { trailing: false, leading: true })); 23 24 this.$container = document.getElementById('section-2'); 25 this.$container.addEventListener('wheel', _.throttle((e)=>{ 26 e.preventDefault(); 27 if(e.deltaY < 0) { 28 $('#section-2').removeClass("visible"); 29 $('#section-2').addClass("off"); 30 $("#section-1").delay(1500).queue(function() { 31 $(this).addClass("on").dequeue(); 32 $(this).removeClass("none"); 33 }); 34 $("#section-2").delay(2000).queue(function() { 35 $(this).removeClass("off").dequeue(); 36 }); 37 $("#section-1").delay(1800).queue(function() { 38 $(this).addClass("visible").dequeue(); 39 $(this).removeClass("on").dequeue(); 40 }); 41 } else if(e.deltaY > 0) { 42 $('#section-2').removeClass("visible"); 43 $('#section-2').addClass("off down"); 44 $("#section-3").delay(1500).queue(function() { 45 $(this).addClass("on").dequeue(); 46 }); 47 $("#section-2").delay(2000).queue(function() { 48 $(this).removeClass("off down").dequeue(); 49 }); 50 $("#section-3").delay(1800).queue(function() { 51 $(this).addClass("visible").dequeue(); 52 $(this).removeClass("on").dequeue(); 53 }); 54 $("#wrap").delay(3500).queue(function() { 55 $(this).addClass("onscroll").dequeue(); 56 }); 57 } 58 return false; 59 }, 7300, { trailing: false, leading: true })); 60 61 this.$container = document.getElementById('section-3'); 62 $(window).on('scroll', function(){ 63 var h = $(this).scrollTop(); 64 if(h <= 0){ 65 this.$container.addEventListener('wheel', _.throttle((e)=>{ 66 e.preventDefault(); 67 if(e.deltaY < 0) { 68 $('#section-3').removeClass("visible"); 69 $('#section-3').addClass("off"); 70 $("#wrap").removeClass("onscroll").dequeue(); 71 $("#section-2").delay(1500).queue(function() { 72 $(this).addClass("on").dequeue(); 73 }); 74 $("#section-3").delay(2000).queue(function() { 75 $(this).removeClass("off").dequeue(); 76 }); 77 $("#section-2").delay(1800).queue(function() { 78 $(this).addClass("visible").dequeue(); 79 $(this).removeClass("on").dequeue(); 80 }); 81 } 82 return false; 83 }, 5300, { trailing: false, leading: true })); 84 } 85 }); 86}
その他に試したこと
fullpage.jsを試してもみましたが、知識不足のためうまくできませんでした。
fullpage.jsなどを使用した方が簡単にできるようでしたらfullpage.jsを使用するやり方でも構いませんので、ご教示いただければ助かります。
あなたの回答
tips
プレビュー