wow.js происходит только при прокрутке вниз

Question

Я использую wow.js, и он работает только при загрузке страницы и один раз, когда прокручивается, Я бы хотел, чтобы он запускался каждый раз, когда я просматриваю позицию div и не только один раз, когда страница загружается.

<div class="wow rotateIn animated" data-wow-delay="0.3s" data-wow-duration="0.5s"></div> 

Answer 1

WowJs не предоставляет функциональность каждый раз, когда применяется анимация прокрутки. В WowJs Animation применяется один раз, когда вы впервые просматриваете страницу. если вы хотите применить этот тип функций вместо WowJs, вы можете использовать библиотеку ScrollRevealJs. ScrollRevealJs имеет параметр сброса, который предоставляется при каждом прокрутке анимации страницы.

См эту ссылку: - http://scrollrevealjs.org/

Answer 2

попробовать это

 window.addEventListener('scroll', function(e) { 

     if($(window).scrollTop() <= 50) { 
      $('.wow').removeClass('animated'); 
      $('.wow').removeAttr('style'); 
      new WOW().init(); 
     } 

    }); 

Answer 3

Попробуйте

// Repeat demo content 
 
    var $body = $('body'); 
 
    var $box = $('.box'); 
 
    for (var i = 0; i < 20; i++) { 
 
    $box.clone().appendTo($body); 
 
    } 
 

 
    // Helper function for add element box list in WOW 
 
    WOW.prototype.addBox = function(element) { 
 
    this.boxes.push(element); 
 
    }; 
 

 
    // Init WOW.js and get instance 
 
    var wow = new WOW(); 
 
    wow.init(); 
 

 
    // Attach scrollSpy to .wow elements for detect view exit events, 
 
    // then reset elements and add again for animation 
 
    $('.wow').on('scrollSpy:exit', function() { 
 
    $(this).css({ 
 
     'visibility': 'hidden', 
 
     'animation-name': 'none' 
 
    }).removeClass('animated'); 
 
    wow.addBox(this); 
 
    }).scrollSpy();

.box { 
 
    display: block; 
 
    width: 200px; 
 
    background: rgba(255, 255, 255, 0.7); 
 
    color: #eb3980; 
 
    font-family: "Comic Sans MS", "Comic Sans"; 
 
    border: 3px dashed pink; 
 
    margin: 30px auto; 
 
    text-align: center; 
 
} 
 

 
.doge { 
 
    display: block; 
 
    width: 200px; 
 
    height: 200px; 
 
    position: fixed; 
 
    bottom: 10px; 
 
    right: 10px; 
 
    background: url(http://mynameismatthieu.com/WOW/img/wow-8.gif) no-repeat; 
 
} 
 

 
body { 
 
    background: url(http://mynameismatthieu.com/WOW/img/wow-logo.jpg) #fff fixed no-repeat center center; 
 
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet"/> 
 
<div class="box"> 
 
    <h1 class="wow slideInLeft">Hello</h1> 
 
    <h1 class="wow slideInRight">World</h1> 
 
    <h2> </h2> 
 
</div> 
 
<div class="doge wow bounceIn"></div> 
 

 
<!-- First load wow.js and other libraries --> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js"></script> 
 
<script src="https://code.jquery.com/jquery-1.9.1.js"></script> 
 

 
<!-- scrollSpy plugin see https://github.com/thesmart/jquery-scrollspy --> 
 
<script src="https://gitcdn.xyz/repo/thesmart/jquery-scrollspy/0.1.3/scrollspy.js"></script> 
 

 
<!-- Modify after --> 
 
<script> 
 
    
 

 
</script>