実現したいこと
WEBサイトコーディング初心者です。
シャッ（CSS） | 動くWebデザインアイディア帳
このサイトを参考にHTMLとCSSを書きました。
そのアニメーションがスクロールしたら発火するようにしたいのですが思わしい結果が得られません。
最低限のコードを載せますので、ほかも必要であればおっしゃってください。
発生している問題・分からないこと
ChatGTPでJSのコードを書いてもらいました。
ページのロード時に発火してしまいます。
該当のソースコード
HTML
1<div class="bgextend bgLRextend scroll-trigger"> 2 <div class="love"> 3 <p class="bgappear">『愛してる』を、知りたいのです。</p> 4 </div> 5</div>
CSS
1.love {2 text-align: center;3 font-size: 22px;4 line-height: 0;5 font-weight: bold;6 color: #746761;7 }8 9 .bgextend{10 animation-name:bgextendAnimeBase;11 animation-duration:1s;12 animation-fill-mode:forwards;13 position: relative;14 overflow: hidden;/* はみ出た色要素を隠す */15 opacity:0;16 }17 18 @keyframes bgextendAnimeBase{19 from {20 opacity:0;21 }22 23 to {24 opacity:1; 25 }26 }27 28 /*中の要素*/29 .bgappear{30 animation-name:bgextendAnimeSecond;31 animation-duration:1s;32 animation-delay: 0.6s;33 animation-fill-mode:forwards;34 opacity: 0;35 }36 37 @keyframes bgextendAnimeSecond{38 0% {39 opacity: 0;40 }41 100% {42 opacity: 1;43 }44 }45 46 /*--------- 左から --------*/47 .bgLRextend::before{48 animation-name:bgLRextendAnime;49 animation-duration:1s;50 animation-fill-mode:forwards;51 content: "";52 position: absolute;53 width: 100%;54 height: 100%;55 background-color: #666;/*伸びる背景色の設定*/56 }57 @keyframes bgLRextendAnime{58 0% {59 transform-origin:left;60 transform:scaleX(0);61 }62 50% {63 transform-origin:left;64 transform:scaleX(1);65 }66 50.001% {67 transform-origin:right;68 }69 100% {70 transform-origin:right;71 transform:scaleX(0);72 }73 }74
jQuery（どちらか一方書く）
1$(document).ready(function() { 2 var scrollTrigger = $('.scroll-trigger'); 3 4 function handleScroll() { 5 var scrollY = $(window).scrollTop(); 6 7 // 20px以上スクロールしたらクラスを追加 8 if (scrollY >= 20) { 9 // アニメーションが終了したらfinishedクラスを追加 10 function animationEndHandler() { 11 scrollTrigger.addClass('finished'); 12 // イベントリスナーを一度だけ実行するために削除 13 scrollTrigger.off('animationend', animationEndHandler); 14 } 15 16 // アニメーションが終了している場合は直ちに処理を実行 17 if (scrollTrigger.hasClass('scrolled')) { 18 animationEndHandler(); 19 } else { 20 // アニメーションを開始 21 scrollTrigger.addClass('scrolled'); 22 // アニメーションが終了したらfinishedクラスを追加 23 scrollTrigger.on('animationend', animationEndHandler); 24 } 25 } 26 } 27 28 // スクロール時にイベントを発火 29 $(window).scroll(handleScroll); 30});
window.addEventListener('load', function () { var scrollTrigger = document.querySelector('.scroll-trigger'); function handleScroll() { var scrollY = window.scrollY || window.pageYOffset; // 20px以上スクロールしたらクラスを追加 if (scrollY >= 20) { // アニメーションが終了したらfinishedクラスを追加 function animationEndHandler() { scrollTrigger.classList.add('finished'); // イベントリスナーを一度だけ実行するために削除 scrollTrigger.removeEventListener('animationend', animationEndHandler); } // アニメーションが終了している場合は直ちに処理を実行 if (scrollTrigger.classList.contains('scrolled')) { animationEndHandler(); } else { // アニメーションを開始 scrollTrigger.classList.add('scrolled'); // アニメーションが終了したらfinishedクラスを追加 scrollTrigger.addEventListener('animationend', animationEndHandler); } } } // スクロール時にイベントを発火 window.addEventListener('scroll', function () { // 遅延を加えることで、load イベント発火後にスクロールイベントの監視が始まる setTimeout(handleScroll, 50); }); });
試したこと・調べたこと
上記の詳細・結果
修正を何回かかけましたが、何度やってもページのロード時に発火してしまいます。
補足
特になし
0 コメント