Запуск анимации с родительским DIV с использованием WOW.js

Question

У меня есть родительский DIV (.wrap) с несколькими изображениями, которые fadeIn используют WOW.js/Animate.css.

Каждое изображение позиционируется Абсолютно в разных местах.

Мне было интересно, есть ли способ вызвать все анимации внутри родительского DIV, используя смещение родительского DIV, а не смещение каждого отдельного изображения.

<div class="wrap"> 

    <div class="calculator"> 
     <div class="wow fadeInDown" data-wow-delay="600ms" data-wow-offset="200"> 
      <img src="img/overlay-calculator.png" alt=""> 
     </div> 
    </div> 

    <div class="coffee"> 
     <div class="wow fadeInDown" data-wow-delay="800ms" data-wow-offset="200"> 
      <img src="img/overlay-coffee.png" alt=""> 
     </div> 
    </div> 

    <div class="file1"> 
     <div class="wow fadeInUp" data-wow-delay="1200ms" data-wow-offset="200"> 
      <img src="img/overlay-file-1.png" alt=""> 
     </div> 
    </div> 

    <div class="file2"> 
     <div class="wow fadeInUp" data-wow-delay="600ms" data-wow-offset="200"> 
      <img src="img/overlay-file-2.png" alt=""> 
     </div> 
    </div> 

    <div class="keyboard"> 
     <div class="wow fadeInDown" data-wow-delay="100ms" data-wow-offset="200"> 
      <img src="img/overlay-keyboard.png" alt=""> 
     </div> 
    </div> 

    <div class="marker"> 
     <div class="wow fadeInUp" data-wow-delay="1200ms" data-wow-offset="200"> 
      <img src="img/overlay-marker.png" alt=""> 
     </div> 
    </div> 

    <div class="mobile"> 
     <div class="wow fadeInUp" data-wow-delay="1000ms" data-wow-offset="200"> 
      <img src="img/overlay-mobile.png" alt=""> 
     </div> 
    </div> 

    <div class="mouse"> 
     <div class="wow fadeInDown" data-wow-delay="500ms" data-wow-offset="200"> 
      <img src="img/overlay-mouse.png" alt=""> 
     </div> 
    </div> 
</div> 

Answer 1

WowJs не срабатывает, когда родительский DIV будет отображаться в ViewPort.you не может сделать это с WowJs. используя библиотеку ScrollMagicJs, вы можете легко вызвать триггер, когда родительский div появится в ViewPort.