jquery – 使用WOW.js使用父DIV触发动画

2023年12月24日 269次阅读

我有一个父DIV(.wrap),其中包含多个使用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>

最佳答案 当父div出现在ViewPort中时,WowJs不会触发.你不能用WowJs执行此操作.使用ScrollMagicJs库,当父div出现在ViewPort中时,您可以轻松触发.

点赞