Question

在滚动时，我将使用animate.css + jquery对html节进行动画处理。但是失败了。这是我的html：

<div class="services__content">
    <div class="services__img animated scroll-animations">
        <div class="relative">
            <img src="images/png/services-laptop.png" alt="" class="services__img-relative">
        </div>
    </div>
    <div class="services__content-text">
        <h3>Web Design</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est.</p>
        <a href="#" class="btn btn--orange hov-up">View more</a>
    </div>
</div>

这是我的jQuery：

$(document).ready(function() {
    // Check if element is scrolled into view
    function isScrolledIntoView(elem) {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();
        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();
        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }
    // If element is scrolled into view, fade it in
    $(window).scroll(function() {
        $('.scroll-animations .animated').each(function() {
            if (isScrolledIntoView(this) === true) {
                $('.services__img').addClass('fadeInRight');
            }
        });
    });
});

我链接了animate.css和jquery

<script type="text/javascript" src="https://cdn.jsdelivr.net/blazy/latest/blazy.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>

窗口滚动动画不适用于animate.css + JQuery

0 个答案: