Les éléments s'affichent lorsque l'utilisateur fait défiler vers le bas, comment ajouter une animation

J'ai ce code qui fait ce que je veux, quand l'utilisateur fait défiler la page, le contenu apparait, cela fonctionne bien. Mais je voulais que chaque div soit animé à mesure qu'ils apparaissaient. Le problème est que l'animation se produit tout à la fois et juste une fois, pas comme les éléments se fanent. Y'a t'il un moyen d'arranger cela?Les éléments s'affichent lorsque l'utilisateur fait défiler vers le bas, comment ajouter une animation

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"); 
      } 
     }); 
     }); 
    });

Source

2016-11-14 Sergi

J'ai modifié votre violon. Je pense que ce que j'ai est ce que tu cherches? Fondamentalement, vous ne voulez que fondre dans "cet" élément. Votre code ci-dessus fait l'animation pour chaque élément qui a la classe "fadeInBlockLeft" ou "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"); 
 
       } 
 
      } 
 
     }); 
 
     }); 
 
    });

Source

2016-11-14 20:01:52

Np. Vous pouvez également essayer d'inclure votre animation d'opacité dans vos animations css3. C'est juste ma préférence cependant. –

Vous avez raison, cela a changé aussi. – Sergi

Vous avez à faire référence $ (ce) et non la classe d'élément (qui appelle tous les éléments):

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

Working JSFiddle

Source

2016-11-14 20:01:29 Alvaro

Bien que ce soit la racine du problème, tous les éléments viennent de la gauche. La réponse ci-dessus est la bonne. – Sergi

Les éléments s'affichent lorsque l'utilisateur fait défiler vers le bas, comment ajouter une animation

Répondre

Questions connexes