Анимация прокрутки окна не работает с animate.css + JQuery - PullRequest
Новая
       14

Анимация прокрутки окна не работает с animate.css + JQuery

0 голосов
/ 07 сентября 2018

Я использую 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>
...