Q&A
上記コードのみでは、再現しませんでした。
HTML内の要素は仕方がないと思うので必要であればCSSで高さを設定する、またCSSのキーフレームアニメーションを記述するなどをお願いします。
scroll-snapを使用してフルページスクロールのサイトを作成して、尚且つスクロール連動のフェードインアニメーションを実装しようとしているのですが、スクロールの挙動が変で困っています。
挙動の不具合は.section02の下までスクロールし終えてフェードインが完了した瞬間に何故か.section02のトップまで勝手に戻ってしまいます。これはマークアップの問題でしょうか？どなたか原因分かる方がいらっしゃったら教えていただきたいです。よろしくお願いします。
html
1<body class="l-wrapper" id="top"> 2 <main class="l-main fullpage" id="fullpage"> 3 <div class="js-box section js-heigh section01"></div> 4 <div class="section js-second-page section02" id="section02"> 5 <div class="u-sp-only"> 6 <div class="p-home__content"> 7 <div class="p-home__content-inner"> 8 <div class="p-home__content__img-wrap"> 9 <span class="p-home__content__img"><img alt="" src="/assets/img/home/home-background-img01.jpg"></span> 10 <div class="p-home__content__date-wrap"> 11 <p class="p-home__content__date"><img alt="" src="/assets/img/home/date01.png"></p><a class="p-home__content__sns" href=""><img alt="" src="/assets/img/home/ico-sns01.png"></a> 12 </div> 13 </div> 14 <p class="p-home__content__columns-item 15 p-home__content__columns-item01">ダミーテキストです。</p> 16 <div class="js-section02"> 17 <div class="p-home__content__columns"> 18 <a class="link-hover dflex" href=""> 19 <div class="p-home__content__columns-item 20 p-home__content__columns-item02"> 21 <div class="video"> 22 <div class="p-home__content__columns-item__heading"> 23 <span>PICK UP</span> <span>CONTENTS</span> 24 </div><video class="object-fit" id="js-video05" loop="" src="/assets/video/video02.mp4"></video> 25 </div> 26 <div class="p-home__content__columns-item__title-wrap"> 27 <div class="p-home__content__columns-item__title"><img alt="" src="/assets/img/home/content__colum_title01.png"></div> 28 <div class="p-home__content__columns-item__text-wrap"> 29 <p class="p-home__content__columns-item__text">この文章はダミーです。この文章はダミーです。記者にとって、記事を書く時間は1割くらいで、残りの9割</p> 30 <div class="p-home__content__columns__links"> 31 <p class="p-home__content__columns__link">OVERVIEW</p> 32 <p class="p-home__content__columns__link 33 more">MORE</p> 34 </div> 35 </div> 36 </div> 37 </div> 38 </a> 39 </div> 40 <div> 41 <div class="p-home__content__columns02" id="section03"> 42 <div class="p-home__content__columns-item p-home__content__columns-item03"> 43 <div> 44 <a class="link-hover dblock" href=""> 45 <div class="p-home__content__columns-img 46 video-parent"> 47 <video class="object-fit" id="js-video06" loop="" src="/assets/video/video03.mp4"></video> 48 </div> 49 <h2 class="p-home__content__columns__title"> 50 <img alt="" class="u-sp-only" src="/assets/img/home/columns-title01-sp.png"> 51 </h2> 52 <p class="p-home__content__columns__text">この文章はダミーです。この文章はダミーです。記者にとって、記事を書く時間は1割くらいで、残りの9割</p> 53 <div class="p-home__content__columns__links"> 54 <p class="p-home__content__columns__link">EVOLUTION</p> 55 <p class="p-home__content__columns__link 56 more">MORE</p> 57 </div> 58 </a> 59 </div> 60 <div> 61 <div class="p-home__content__columns__digital"> 62 <a class="link-hover dblock" href=""> 63 <h2 class="p-home__content__columns__digital-title"><img alt="" src="/assets/img/home/content__columns__digital.jpg"></h2> 64 <p class="p-home__content__columns__digital-link p-home__content__columns__link more">MORE</p> 65 </a> 66 </div> 67 </div> 68 </div> 69 <div class="p-home__content__columns-item 70 p-home__content__columns-item04"> 71 <div class="p-home__content__columns__keyword-wrap"> 72 <a class="link-hover dblock" href=""> 73 <h2 class="p-home__content__columns__keyword-title"><img alt="" src="/assets/img/home/content_colum_img_keyword.jpg"></h2> 74 <div class="p-home__content__columns__links"> 75 <p class="p-home__content__columns__link">KEYWORD</p> 76 <p class="p-home__content__columns__link 77 more">MORE</p> 78 </div> 79 </a> 80 </div> 81 <div class="p-home__content__columns__title-wrap"> 82 <a class="link-hover dblock" href=""> 83 <h2 class="p-home__content__columns__title"> 84 <img alt="" class="u-sp-only" src="/assets/img/home/columns-title02-sp.png"> 85 <span>マッチング</span> 86 </h2> 87 <p class="p-home__content__columns__link 88 more dinline">MORE</p> 89 <p class="p-home__content__columns__text">この文章はダミーです。この文章はダミーです。記者にとって、記事を書く時間</p> 90 </a> 91 </div> 92 <div class="p-home__content__columns__img-wrap"> 93 <a class="link-hover dblock" href=""> 94 <div class="p-home__content__columns__img"> 95 <video class="object-fit 96 video" id="js-video07" loop="" src="/assets/video/video04.mp4"></video> 97 </div> 98 </a> 99 </div> 100 </div> 101 </div> 102 </div> 103 </div> 104 </div> 105 </div> 106 <footer class="l-footer u-sp-only"> 107 <ul class="l-footer-nav"> 108 <li class="l-footer-nav__item"> 109 <a href="">メニュー１</a> 110 </li> 111 <li class="l-footer-nav__item"> 112 <a href="">メニュー２</a> 113 </li> 114 <li class="l-footer-nav__item"> 115 <a href="">メニュー３</a> 116 </li> 117 <li class="l-footer-nav__item"> 118 <a href="">メニュー４</a> 119 </li> 120 <li class="l-footer-nav__item"> 121 <a href="">メニュー５</a> 122 </li> 123 </ul> 124 <h2 class="l-footer-logo">YOMIURI<br> 125 RECRUITMENT</h2><a class="c-go-top u-sp-only" href="#firstPage" id="js-gotop">PAGETOP</a> 126 </footer> 127 </div> 128 </div> 129 </main>
sass
1.fullpage { 2 overflow: scroll; 3 scroll-snap-type: y mandatory; 4 scroll-snap-stop: always; 5 height: 100vh; 6 .section { 7 scroll-snap-align: start; 8 9 } 10 .section01 { 11 position: relative; 12 } 13 .section01 { 14 height: 100%; 15 } 16 17 .section02 { 18 scroll-margin-bottom: 300px; 19 } 20} 21 22.p-home__content__columns-img, 23.p-home__content__columns__keyword-wrap, 24.p-home__content__columns__digital, 25.p-home__content__columns__title-wrap, 26.p-home__content__columns__img-wrap { 27 opacity: 0; 28} 29 30#section03.js-show { 31 32 .p-home__content__columns-img { 33 animation: Slide-left 1.5s ease 1 forwards; 34 animation-delay: 1.5s; 35 } 36 .p-home__content__columns__keyword-wrap { 37 animation: Slide-right 1.5s ease 1 forwards; 38 animation-delay: 2s; 39 } 40 .p-home__content__columns__digital { 41 animation: Slide-left 1.5s ease 1 forwards; 42 animation-delay: 2s; 43 } 44 .p-home__content__columns__title-wrap, 45 .p-home__content__columns__img-wrap { 46 animation: Slide-right 1.5s ease 1 forwards; 47 animation-delay: 2.5s; 48 } 49}
JavaScript
1$(".fullpage").scroll(function () { 2 let scrollTop = $(".fullpage").scrollTop(); // スクロール上部の位置 3 let areaTop01 = $("#section02").offset().top; // 対象エリアの上部の位置 4 let areaTop02 = $("#section03").offset().top; // 対象エリアの上部の位置 5 //let areaBottom = areaTop + $(".l-footer").innerHeight(); // 対象エリアの下部の位置 6 if (scrollTop > areaTop01) { 7 $("#section02").addClass("js-show"); // スクロールが対象エリアに入った場合 8 } 9 10 if (scrollTop > areaTop02) { 11 $("#section03").addClass("js-show"); // スクロールが対象エリアに入った場合 12 } 13 });
環境を教えてください。
あなたの回答
tips
プレビュー
