Q&A
具体的に何をどうしたいのか図示できませんか？
実現したいこと
APNGを複数の箇所に設置し、
その場所までスクロールする度にアニメーションするようにしたいです。
ループはせず、最後で止める想定です。
APNGは3種類あり(A、B、Cと仮定)、たとえばページ内にAが10箇所、B、Cが数カ所あるような形です。
発生している問題・分からないこと
https://kaiteki-chokin.com/scroll-gif/
上記サイトのコードを使い、
classとを変えて01、02、03…と増やして、切り替わる画像もABCで変えてみたのですが
上手く動作しない時があり、上手く実装できないか悩んでいます。
該当のソースコード
JavaScript
1$(window).scroll(function(){ 2 var top = $("#gif-anime").offset().top; 3 var position = top - $(window).height(); 4 5 if($(window).scrollTop() > position + 100){ //画像の上100pxが見えたらGIF画像に切替 6 if($('#gif-anime').hasClass('active')){ 7 } else { 8 $('#gif-anime').attr('src', './images/demo.gif'); 9 $('#gif-anime').addClass('active'); 10 } 11 } 12});
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
下記のようにanime01〜10と増やし、
b、cも制作し、個別に増やしていったのですが、
動く箇所と動かない箇所が出て来てしまいました。
JavaScript
1$(window).scroll(function(){ 2 var top = $(".anime01").offset().top; 3 var position = top - $(window).height(); 4 5 if($(window).scrollTop() > position + 10){ 6 if($('.anime01').hasClass('active')){ 7 } else { 8 $('.anime01').attr('src', 'img/img_test-a.png'); 9 $('.anime01').addClass('active'); 10 } 11 } 12}); 13 14$(window).scroll(function(){ 15 var top = $(".anime02").offset().top; 16 var position = top - $(window).height(); 17 18 if($(window).scrollTop() > position + 10){ 19 if($('.anime02').hasClass('active')){ 20 } else { 21 $('.anime02').attr('src', 'img/img_test-a.png'); 22 $('.anime02').addClass('active'); 23 } 24 } 25}); 26$(window).scroll(function(){ 27 var top = $(".anime-b").offset().top; 28 var position = top - $(window).height(); 29 30 if($(window).scrollTop() > position + 10){ 31 if($('.anime-b').hasClass('active')){ 32 } else { 33 $('.anime-b').attr('src', 'img/img_test-b.png'); 34 $('.anime-b').addClass('active'); 35 } 36 } 37}); 38$(window).scroll(function(){ 39 var top = $(".anime-c").offset().top; 40 var position = top - $(window).height(); 41 42 if($(window).scrollTop() > position + 10){ 43 if($('.anime-c').hasClass('active')){ 44 } else { 45 $('.anime-c').attr('src', 'img/img_test-c.png'); 46 $('.anime-c').addClass('active'); 47 } 48 } 49});
補足
実現したい図を作成しました。
ページ内に複数あるAPNGを、全てスクロールに合わせて画面に現れたタイミングで
アニメーションを開始させたいです。
コメント有り難うございます。分かりにくく申し訳ありませんでした。
図を作成しました、どうぞよろしくお願いいたします。
ちなみに図ではすべて表示されたときにアニメーション開始と読めるのですが、半分表示されているときはなんらかのサムネイルが表示されているイメージであっていますか？
回答1件
0
ベストアンサー
IntersectionObserverで制御してはどうでしょうか？
サムネイルを表示しておき、アニメーション開始のタイミングでsrcを置き換えるとか
参考
IntersectionObserverを使った画像の切り替え
html
1<style> 2.dummy{ 3 background-Color:white; 4 height:80%; 5} 6.dummy:nth-child(odd){ 7 background-Color:lightgray; 8} 9</style> 10<script> 11const crossing=()=>{ 12 const observer = new IntersectionObserver(changes=>{ 13 for (let change of changes) { 14 if(change.intersectionRatio == 1){ 15 change.target.src=change.target.dataset.src; 16 } 17 } 18 }); 19 document.querySelectorAll('.anime').forEach(target=>observer.observe(target)); 20} 21window.addEventListener('pageshow',crossing); 22window.addEventListener('scroll',crossing); 23window.addEventListener('DOMContentLoaded',()=>{ 24 document.querySelectorAll('img[data-src]').forEach(x=>{ 25 const img=new Image(); 26 img.src=x.dataset.src; 27 }); 28}); 29</script> 30<body> 31<div class="dummy">1</div> 32<div class="dummy">2<img src="https://placehold.jp/f00/000/300x300.png?text=2-1" data-src="https://placehold.jp/000/f00/300x300.png?text=2-2" alt="2" class="anime"></div> 33<div class="dummy">3<img src="https://placehold.jp/0f0/000/300x300.png?text=3-1" data-src="https://placehold.jp/000/0f0/300x300.png?text=3-2" alt="3" class="anime"></div> 34<div class="dummy">4<img src="https://placehold.jp/f0f/000/300x300.png?text=4-1" data-src="https://placehold.jp/000/f0f/300x300.png?text=4-2" alt="4" class="anime"></div> 35<div class="dummy">5</div> 36<div class="dummy">6<img src="https://placehold.jp/fff/800/300x300.png?text=6-1" data-src="https://placehold.jp/800/fff/300x300.png?text=6-2" alt="6" class="anime"></div> 37<div class="dummy">7<img src="https://placehold.jp/fff/080/300x300.png?text=7-1" data-src="https://placehold.jp/080/fff/300x300.png?text=7-2" alt="7" class="anime"></div> 38<div class="dummy">8<img src="https://placehold.jp/fff/008/300x300.png?text=8-1" data-src="https://placehold.jp/008/fff/300x300.png?text=8-2" alt="8" class="anime"></div>
投稿2024/11/06 03:45
編集2024/11/06 05:02総合スコア116487
上手く動作しました！！！！！！！ありがとうございます！！！！
IntersectionObserverを恥ずかしながら知りませんでした。
調べるとWebアニメ0ション必須とあり、きちんと勉強しようと思いました。
本当にありがとうございました！！！
補足：
IntersectionObserverはたとえば画像が20%表示されたらとか比率を指定することができるので想定にあわせてイベントの発動を調整できます。
また今回DOMContentLoaded内でやっているのが画像の先読み処理で、これをしておかないとタイミングに合わせて処理をしようとしても遅延が発生する場合があります。
ただ先読みを大量にするとそれはそれで全体的な遅延につながるので、lazyload的な処理もあるのであわせて学習しておくとよいと思います。
あなたの回答
tips
プレビュー
