前提・実現したいこと
スクロールして指定した位置に来ると画像がふわっと浮き出てくるものを、同じページで複数使いたいです。
発生している問題・エラーメッセージ
一番最初しか作動せず、二個目以降は常に非表示になってしまいます。
該当のソースコード
js
1$('#animation').css('visibility','hidden'); 2$(window).scroll(function(){ 3 var windowHeight = $(window).height(), 4 topWindow = $(window).scrollTop(); 5 $('#animation').each(function(){ 6 var targetPosition = $(this).offset().top; 7 if(topWindow > targetPosition - windowHeight + 100){ 8 $(this).addClass("fadeInDown"); 9 } 10 }); 11}); 12 13 14$('#animation2').css('visibility','hidden'); 15$(window).scroll(function(){ 16 var windowHeight = $(window).height(), 17 topWindow = $(window).scrollTop(); 18 $('#animation2').each(function(){ 19 var targetPosition = $(this).offset().top; 20 if(topWindow > targetPosition - windowHeight + 50){ 21 $(this).addClass("fadeInDown2"); 22 } 23 }); 24}); 25 26$('#animation3').css('visibility','hidden'); 27$(window).scroll(function(){ 28 var windowHeight = $(window).height(), 29 topWindow = $(window).scrollTop(); 30 $('#animation3').each(function(){ 31 var targetPosition = $(this).offset().top; 32 if(topWindow > targetPosition - windowHeight + 100){ 33 $(this).addClass("fadeInDown3"); 34 } 35 }); 36}); 37 38$('#animation4').css('visibility','hidden'); 39$(window).scroll(function(){ 40 var windowHeight = $(window).height(), 41 topWindow = $(window).scrollTop(); 42 $('#animation4').each(function(){ 43 var targetPosition = $(this).offset().top; 44 if(topWindow > targetPosition - windowHeight + 100){ 45 $(this).addClass("fadeInDown4"); 46 } 47 }); 48});
css
1 2 @-webkit-keyframes fadeInDown { 3 0% { opacity: 0; -webkit-transform: translateY(-20px); } 4 50% { opacity: 0; -webkit-transform: translateY(-10px); } 5 100% { opacity: 1; -webkit-transform: translateY(0); } 6 } 7 @keyframes fadeInDown { 8 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 9 50% { opacity: 0; -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } 10 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 11 } 12 13.box{ 14 visibility: hidden; 15} 16 17.fadeInDown { 18 -webkit-animation-fill-mode:both; 19 -ms-animation-fill-mode:both; 20 animation-fill-mode:both; 21 -webkit-animation-duration:1s; 22 -ms-animation-duration:1s; 23 animation-duration:1s; 24 -webkit-animation-name: fadeInDown; 25 animation-name: fadeInDown; 26 visibility: visible !important; 27} 28.fadeInDown2 { 29 -webkit-animation-fill-mode:both; 30 -ms-animation-fill-mode:both; 31 animation-fill-mode:both; 32 -webkit-animation-duration:1s; 33 -ms-animation-duration:1s; 34 animation-duration:1s; 35 animation-delay:0.3s; 36 -webkit-animation-name: fadeInDown; 37 animation-name: fadeInDown; 38 visibility: visible !important; 39} 40 41.fadeInDown3 { 42 -webkit-animation-fill-mode:both; 43 -ms-animation-fill-mode:both; 44 animation-fill-mode:both; 45 -webkit-animation-duration:1s; 46 -ms-animation-duration:1s; 47 animation-duration:1s; 48 animation-delay:0.6s; 49 -webkit-animation-name: fadeInDown; 50 animation-name: fadeInDown; 51 visibility: visible !important; 52} 53 54.fadeInDown4 { 55 -webkit-animation-fill-mode:both; 56 -ms-animation-fill-mode:both; 57 animation-fill-mode:both; 58 -webkit-animation-duration:1s; 59 -ms-animation-duration:1s; 60 animation-duration:1s; 61 animation-delay:0.9s; 62 -webkit-animation-name: fadeInDown; 63 animation-name: fadeInDown; 64 visibility: visible !important; 65}
html
1<div class="box"> 2 <div><p class="cf" id="animation"><img src="" alt="" width="900"></p></div> 3 <div><p class="cf" id="animation2"><img src="" alt="" width="900"></p></div> 4 <div><p class="cf" id="animation3"><img src="" alt="" width="900"></p></div> 5 <div><p class="cf" id="animation4"><img src="" alt="" width="900"></p></div> 6</div> 7<div class="box"> 8 <div><p class="cf" id="animation"><img src="" alt="" width="900"></p></div> 9 <div><p class="cf" id="animation2"><img src="" alt="" width="900"></p></div> 10 <div><p class="cf" id="animation3"><img src="" alt="" width="900"></p></div> 11 <div><p class="cf" id="animation4"><img src="" alt="" width="900"></p></div> 12 </div> 13<div class="box"> 14 <div><p class="cf" id="animation"><img src="" alt="" width="900"></p></div> 15 <div><p class="cf" id="animation2"><img src="" alt="" width="900"></p></div> 16 <div><p class="cf" id="animation3"><img src="" alt="" width="900"></p></div> 17 <div><p class="cf" id="animation4"><img src="" alt="" width="900"></p></div> 18 </div>
補足情報
imgのソースは消してありますが実際ははいっています。
HTMLとCSSは初心者程度の知識でjsは全く知識がないのでどうしたらいいのか全く分かりません。
調べるにもどう調べたらいいのか分からず、教えていただけると助かります。
またふわっと浮き出てくる動きは同じアニメーションを使っているのですがjsもつかったときの
まとめて書く書き方が分からず、仕方なくひとつずつ書きました。
まとめて書く方法がありましたら教えていただきたいです。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/12/19 01:29
2018/12/19 02:01
2018/12/19 05:24 編集
2018/12/21 07:43
2018/12/21 07:46
2018/12/21 07:52