Question

我正在使用wow.js，它仅适用于页面加载和滚动时的一次我希望每当我滚动到div位置时触发它，而不是只在页面加载时触发一次。

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

Answer 1

试试这个

＆＃13;

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ /public/index.php/$1 [L]

＆＃13;

// 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();

＆＃13;

.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;
}

＆＃13;

Answer 2

每次应用滚动动画时都不会提供功能。在WowJs动画中，第一次滚动页面时应用一次。如果你想应用那种类型的功能而不是WowJs，你可以使用ScrollRevealJs库。 ScrollRevealJs具有重置选项，每次应用滚动页面动画时都会提供该选项。

请参阅此链接： - http://scrollrevealjs.org/

Answer 3

试试这个

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

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

     });

wow.js只在向下滚动一次时才会发生

3 个答案: