animation de diaporama pour poster après l'autre sur le défilement?

Question

Je vais avoir un site web avec mon écran wordpress post-être comme ci-dessous (rien d'extraordinaire)

<section id="grid"> 
<div class="container-fluid"> 
     <?php $custom_query = new WP_Query('cat=-9'); // exclude category 9 
while($custom_query->have_posts()) : $custom_query->the_post(); ?> 

    <div <?php post_class(); ?> id="post-<?php the_ID(); ?>" class="post" tabindex="-1" data-easein="slideUpIn" > 
<div class="row"> 
<div class="col-md-6"> 
    <?php the_post_thumbnail(); ?></div> 
    <div class="col-md-1"></div> 
    <div class="col-md-5"><h1><a href="<?php the_permalink(); ?>"> 
    <?php the_title(); ?></a></h1> 
     <?php the_excerpt(); ?></div> 
    </div> 
    </div> 

<?php endwhile; ?> 
<?php wp_reset_postdata(); // reset the query ?> 
</div> 
</section> 

Id aiment avoir l'animation (un slideUpIn par velocity.js) un poste après l'autre, pour cela, je je utilise ceci: (je voudrais éviter tout retard pour cela, mais d'avoir l'animation à partir une fois l'utilisateur d'atteindre le poste de la fenêtre)

jQuery(function ($) { 

$(window).scroll(function() { 
console.log($(window).scrollTop()); 
var topDivHeight = $("#description").height(); 
var viewPortSize = $(window).height(); 

var triggerAt = 500; 
var triggerHeight = (topDivHeight - viewPortSize) + triggerAt; 

if ($(window).scrollTop() >= triggerHeight) { 
     // alert("Your book is overdue."); 

    // $('.post').css('visibility', 'visible').hide().fadeIn(); 
    $(".post").each(function(i){ 
    $(this).delay(i).velocity("transition.slideUpIn", 2000) 
    $(this).off('scroll'); 
}) 
} 
}); }); 

qui commencent à animer après la description div. Le problème que j'avais était qu'il faisait afficher tout le message en un, j'ai donc ajouté chaque fonction comme vous pouvez le voir. Mais avec cette fonction, tous les messages sont animés en boucle et n'arrêtent pas d'être animés.

Quelqu'un sait comment je pourrais y parvenir?

Merci beaucoup!

Answer 1

Il est en "boucle" car il continue de redémarrer la diapositive à chaque événement de défilement car il n'y a rien pour l'empêcher de s'exécuter plus d'une fois. Le .off n'a aucun effet car l'événement de défilement n'est pas enregistré sur l'élément this, mais sur le window.

En outre, scrollTop() est seulement comparé à une hauteur fixe, plutôt que le haut de chaque poste individuel. Le test scrollTop doit être à l'intérieur du each.

Quelque chose comme ceci:

$(window).scroll(function() { 
    console.log($(window).scrollTop()); 

    var viewPortSize = $(window).height(); 

    $(".post").each(function(i){ 
     if ($(window).scrollTop() + viewPortSize >= $(this).offset().top && !$(this).attr('showing')) { 
      $(this).attr('showing', true) 
      $(this).delay(i).velocity("transition.slideUpIn", 2000); 
     } 
    }); 
}); 

Ici l'attribut 'showing' est défini sur l'élément une fois qu'il commence à montrer, et empêche l'animation de diapositives pour être déclenché à nouveau si showing est déjà réglé.

Vous pouvez ajouter la hauteur de déclenchement au test $(window).scrollTop() >= $(this).offset().top en fonction de votre cas d'utilisation.

Here's a demo.