スクロールして要素が画面内に入ったらアニメーションさせたいのですが
今はリロードするとすぐにアニメーションが始まってしまいます。
どこを修正したら良いのかご教授お願いいたします。
html
1<div id="content"></div> 2<div id="object" class="fadeIn"> 3 テキストテキストテキスト 4</div>
css
1#content{ 2width:100%; 3height:100vh; 4} 5.fadeIn { 6 animation-name: fadeIn; 7 -webkit-animation-name: fadeIn; 8 animation-duration: 1.5s; 9 -webkit-animation-duration: 1.5s; 10 animation-timing-function: ease-in-out; 11 -webkit-animation-timing-function: ease-in-out; 12 visibility: visible !important; 13} 14 @keyframes fadeIn { 15 0% { 16 transform: scale(0); 17 opacity: 0.0; 18} 19 60% { 20 transform: scale(1.1); 21} 22 80% { 23 transform: scale(0.9); 24 opacity: 1; 25} 26 100% { 27 transform: scale(1); 28 opacity: 1; 29} 30} 31 @-webkit-keyframes fadeIn { 32 0% { 33 -webkit-transform: scale(0); 34 opacity: 0.0; 35} 36 60% { 37 -webkit-transform: scale(1.1); 38} 39 80% { 40 -webkit-transform: scale(0.9); 41 opacity: 1; 42} 43 100% { 44 -webkit-transform: scale(1); 45 opacity: 1; 46} 47} 48#object { 49 visibility: hidden; 50}
javascript
1<script> 2 $(window).scroll(function() { 3 $('#animatedElement').each(function(){ 4 var imagePos = $(this).offset().top; 5 6 var topOfWindow = $(window).scrollTop(); 7 if (imagePos < topOfWindow+400) { 8 $(this).addClass("fadeIn"); 9 } 10 }); 11 }); 12</script>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/01 18:25
2017/11/01 18:36
2017/11/01 19:09