要素がスクロールダウンするとフェードイン、アニメーションを追加する方法

ユーザーがページをスクロールしたり、コンテンツが表示にフェードインしたりして、うまく動作するようなコードを作成しています。しかし、私はそれぞれの部門が視野に入ってアニメーション化されることを望んでいました。問題は、アニメーションが要素fadeInではなく、一度に一度だけ発生することです。これを修正する方法はありますか？要素がスクロールダウンするとフェードイン、アニメーションを追加する方法

JSFiddle：https://jsfiddle.net/3ox0hn8w/

HTML

<body> 

<div class="headerWrap"> 
    <h1> A scrolling fade in test</h1> 
</div> <!--headerWrap--> 

<div class="fadeInsWrap"> 

<div class="fadeInBlockLeft left"> 
    <h1> Fade in </h1> 
</div> 

<div class="fadeInBlockRight right"> 
    <h1> Fade in </h1> 
</div> 

<div class="fadeInBlockLeft left"> 
    <h1> Fade in </h1> 
</div> 

<div class="fadeInBlockRight right"> 
    <h1> Fade in </h1> 
</div> 

<div class="fadeInBlockLeft left"> 
    <h1> Fade in </h1> 
</div> 

<div class="fadeInBlockRight right"> 
    <h1> Fade in </h1> 
</div> 

<div class="fadeInBlockLeft left"> 
    <h1> Fade in </h1> 
</div> 


</div> <!--fadeInsWrap--> 
</body>

CSS

body { 
    height: 700px; 
} 

.headerWrap { 
    text-align: center; 
    margin-top: 5%; 
} 

.fadeInsWrap { 
    width: 50%; 
    height: 1000px; 
    margin: 0 auto; 
    border: 1px solid; 
    padding-top: 5%; 
} 

.left { 
    border: 1px solid; 
    width: 50%; 
    text-align: center; 
    clear: both; 
} 

.right { 
    width: 50%; 
    float: right; 
    border: 1px solid; 
    text-align: center; 
} 

.fadeInBlockLeft, 
.fadeInBlockRight { 
    opacity: 0; 
    margin-bottom: 7%; 
} 

.animate-inLeft { 
    -webkit-animation: inLeft 600ms ease-in-out forwards; 
    display: block; 
} 

@-webkit-keyframes inLeft { 
    0% { 
    -webkit-transform: translateX(900px); 
    } 
    100% { 
    -webkit-transform: translateX(0px); 
    } 
} 

.animate-inRight { 
    -webkit-animation: inRight 600ms ease-in-out forwards; 
    display: block; 
} 

@-webkit-keyframes inRight { 
    0% { 
    -webkit-transform: translateX(-900px); 
    } 
    100% { 
    -webkit-transform: translateX(0px); 
    } 
}

jQueryの

$(document).ready(function(){ 

    $(window).scroll(function(){ 

     $(".fadeInBlockLeft, .fadeInBlockRight").each(function(i){ 
      var bottom_of_object = $(this).position().top + $(this).outerHeight(); 
      var bottom_of_window = $(window).scrollTop() + $(window).height(); 

      bottom_of_window = bottom_of_window + 50; 

      if(bottom_of_window > bottom_of_object){ 

       $(this).animate({'opacity':'1'},1000); 
       $('.fadeInBlockLeft').addClass("animate-inLeft"); 
       $('.fadeInBlockRight').addClass("animate-inRight"); 
      } 
     }); 
     }); 
    });

出典

2016-11-14 Sergi

私はあなたのフィドルを変更しました。私が持っているものはあなたが探しているものだと思いますか？基本的には、この要素をフェードインさせたいだけです。上のコードは、 "fadeInBlockLeft"または "fadeInBlockRight"クラスを持つすべての要素のアニメーションを行います。

$(document).ready(function(){ 
 
    
 
    $(window).scroll(function(){ 
 
    
 
     $(".fadeInBlockLeft, .fadeInBlockRight").each(function(i){ 
 
      var bottom_of_object = $(this).position().top + $(this).outerHeight(); 
 
      var bottom_of_window = $(window).scrollTop() + $(window).height(); 
 
      
 
    
 
      bottom_of_window = bottom_of_window + 50; 
 
      
 
      if(bottom_of_window > bottom_of_object){ 
 
       
 
       $(this).animate({'opacity':'1'},1000); 
 
       if($(this).hasClass('fadeInBlockLeft')){ 
 
       \t $(this).addClass("animate-inLeft"); 
 
       } 
 
       if($(this).hasClass('fadeInBlockRight')){ 
 
       \t $(this).addClass("animate-inRight"); 
 
       } 
 
      } 
 
     }); 
 
     }); 
 
    });

出典

2016-11-14 20:01:52

Np。 css3アニメーションに不透明アニメーションを含めることもできます。それは私の好みです。 –

あなたは正しいです、それも変更されました。 – Sergi

あなたは$（this）ではない（すべての要素を呼び出している）要素のクラスを参照する必要があります。

$(this).addClass("animate-inLeft"); 
$(this).addClass("animate-inRight");

Working JSFiddle

出典

2016-11-14 20:01:29 Alvaro

それが問題の根本ですが、その後、全ての要素が左から来ます。上記の答えは正しいものです。 – Sergi

要素がスクロールダウンするとフェードイン、アニメーションを追加する方法

答えて

関連する問題