- 締切済み
スクロールで画面が読み込まれたら動くようにしたい
html、cssでテキストを動くようにしたのですがjavascript(jquery)で スクロールで画面が読み込まれたら動くようにしたいのですがどうすれば良いでしょうか。 html <body> <section> </section> <div class="heading"> <div> <p class="slide-up">salon</p> </div> <div> <p class="slide-up">info</p> </div> <div> </div> </body> </body> </body> css body, html { width: 100%; font-family: 'Times New Roman', Times, serif; } section { height: 200vh; } .fadeUp { animation-name: fadeUpAnime; animation-duration: 0.5s; animation-fill-mode: forwards; opacity: 0; } .heading { margin: 80px 0 0 80px; font-size: 15em; line-height: 90%; } .heading>div { overflow: hidden; } .heading>div>p { width: -webkit-max-content; width: -moz-max-content; width: max-content; white-space: nowrap; margin: 0; } div.heading>div { -webkit-animation-delay: 1s; animation-delay: 1s; } .slide-up { -webkit-animation: slid 2s cubic-bezier(0.65, 0, 0.35, 1) both; animation: slid 2s cubic-bezier(0.65, 0, 0.35, 1) both; } @-webkit-keyframes slid { 0% { transform: translateY(300px); } 100% { transform: translateY(0); } } @keyframes slid { 0% { transform: translateY(300px); } 100% { transform: translateY(0); } }
- yamasusu
- お礼率0% (0/4)
- JavaScript
- 回答数3
- ありがとう数0
- みんなの回答 （3）
- 専門家の回答
みんなの回答
- AsarKingChang
- ベストアンサー率46% (3467/7474)
<html> <head> <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script> <style> .waaa,.abcd { /* 単に大きいブロックを作りたいだけ */ height:500px; } </style> <script> $(function(){ $(window).on('scroll', function (){ let e = $('.abcd').offset().top; let h = window.innerHeight; let p = window.scrollY; /* ログは邪魔なので、消してね～ただし概念を理解するのには便利！ */ console.log("scroll pos="+p + "～" + (h+p) + " element="+e); if (e<h+p) { $('.abcd').addClass('gya'); } }); }); </script> </head> <body> <div class="waaa">あああ</div> <div class="waaa">あああ</div> <div class="waaa">あああ</div> <div class="abcd">ここね！</div> <div class="waaa">あああ</div> <div class="waaa">あああ</div> <div class="waaa">あああ</div> </body> </html> ほい
- AsarKingChang
- ベストアンサー率46% (3467/7474)
そのまんま、 スクロールリスナーに、 target=$('selector').offset().top; 要素の位置 pos = $(window).scrollTop(); スクロールバーの位置 を書きたい所ですが、1つだけなら、直接 if ($(window).scrollTop() >= $('セレクタ名').offset().top) { $('範囲に入ったら変化してほしいセレクタ名').addClass(追加したいクラス); } こんだけですよ。 例えば、<div class="abcd">わああああ</div> が画面に入ったら、efghクラスを追加したいなら、 $('.abcd').addClass('.efgh'); こんだけです。 HTMLの構造図（実ソースではなく、ブラウザ内のソース）が スクロールし終わると、 <div class="abcd">ここが、 <div class="abcd efgh">に変わってるのがわかると思います。 もし、発火点と、発動点を分けたいなら、 <div class="abcd"> <div>こっち側にセットしたいなら、 </div> </div> $('.abcd div').addClass('.efgh'); ↑つまりclass=abcdの中にあるdivに対してefghをくっつけろ！って指示。 （ただし、複数あると全部に引っ付くので注意を！） ピンポイントなら中のdivにも、引っかけようのポイントを切っておけばよいでしょう。 ってな感じで、簡単かな～？と思う所です。
- AsarKingChang
- ベストアンサー率46% (3467/7474)
target=$('selector').offset().top; 要素の位置 pos = $(window).scrollTop(); スクロールバーの位置 後は、スクロールにリスナ貼って pos>targetなら、画面に入った（通り過ぎたかは要件に書いてないので不要） 後は、addClassでそのタイミングで発火してほしいcssを必要要素に結合。 こんだけでOKです。 参考資料 https://into-the-program.com/scroll-disp-elem/
補足
すみません、うまくいきません。 コード教えていただけないでしょうか、、、