jquery.inview.min.js
と言うプラグインを使用して、スクールすると要素がフワッと現れる様にしたいのですが、スクーロールしていくと非表示にしているはずの要素が初め表示されてしまいます。その後非表示になり指定している動きをして表示するので一瞬点滅したみたいになってしまっています。
原因が分かる方いらっしゃいますでしょうか。
htmlファイルではcssを先に読み込んでいます。
javascript
1 2$('h2').css('visibility','hidden'); 3$(window).scroll(function(){ 4 var windowHeight = $(window).height(), 5 topWindow = $(window).scrollTop(); 6 $('h2').each(function(){ 7 var targetPosition = $(this).offset().top; 8 if(topWindow > targetPosition - windowHeight + 0){ 9 $(this).addClass("fadeInDown"); 10 } 11 }); 12});
css
1 2.fadeInDown { 3 -webkit-animation-fill-mode:both; 4 -ms-animation-fill-mode:both; 5 animation-fill-mode:both; 6 -webkit-animation-duration:1s; 7 -ms-animation-duration:1s; 8 animation-duration:1s; 9 -webkit-animation-name: fadeInDown; 10 animation-name: fadeInDown; 11 visibility: visible !important; 12} 13@-webkit-keyframes fadeInDown { 14 0% { opacity: 0; -webkit-transform: translateY(-20px); } 15 100% { opacity: 1; -webkit-transform: translateY(0); } 16} 17@keyframes fadeInDown { 18 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 19 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 20}
回答1件
あなたの回答
tips
プレビュー