###前提・実現したいこと
fullpage.jsというプラグインを使ったサイトで、スクロールしてh2が表示されたらフェードインという事をしたいのですが上手く動きません。
宜しくお願いします。
###発生している問題・エラーメッセージ
フェードインされず最初から表示されている状態になってしまいます。
###ソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta charset="UTF-8"> 5<link rel="stylesheet" type="text/css" href="./style.css"> 6<script type="text/javascript" src="./jquery.js"></script> 7<script type="text/javascript" src="./script.js"></script> 8<script type="text/javascript" src="./fullPage.js-master/jquery.fullPage.js"></script> 9</head> 10<body> 11 12<div id="fullpage"> 13 <div class="section active" id="section0"> 14 <h1>タイトル</h1> 15 </div> 16 <div class="section" id="section1"> 17 <h2>タイトル2</h2> 18 <p> 19 内容 20 </p> 21 </div> 22</div> 23</body> 24</html> 25
CSS
1*{ 2 margin:0; 3 padding:0; 4 font-size:100%; 5 list-style:none; 6 line-height: 1; 7} 8 9body{ 10 width:100%; 11 margin:auto; 12} 13 14div#fullpage{ 15 width:100%; 16 position:relative; 17} 18 19.fadeInDown { 20 -webkit-animation-fill-mode:both; 21 -ms-animation-fill-mode:both; 22 animation-fill-mode:both; 23 -webkit-animation-duration:1s; 24 -ms-animation-duration:1s; 25 animation-duration:1s; 26 -webkit-animation-name: fadeInDown; 27 animation-name: fadeInDown; 28 visibility: visible !important; 29} 30@-webkit-keyframes fadeInDown { 31 0% { opacity: 0; -webkit-transform: translateY(-20px); } 32 100% { opacity: 1; -webkit-transform: translateY(0); } 33} 34@keyframes fadeInDown { 35 0% { opacity: 0; -webkit-transform: translateY(-20px); -ms-transform: translateY(-20px); transform: translateY(-20px); } 36 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } 37} 38 39
jQuery
1$(document).ready(function() { 2 $("#fullpage").fullpage({ 3 sectionsColor:["#fff","#fff","#fff","#fff"] 4 }); 5}); 6 7$('h2').css('visibility','hidden'); 8$(window).scroll(function(){ 9 var windowHeight = $(window).height(), 10 topWindow = $(window).scrollTop(); 11 $('h2').each(function(){ 12 var targetPosition = $(this).offset().top; 13 if(topWindow > targetPosition - windowHeight + 100){ 14 $(this).addClass("fadeInDown"); 15 } 16 }); 17});
あなたの回答
tips
プレビュー