Как активировать анимацию при прокрутке контента в поле зрения - PullRequest
Новая
       18

Как активировать анимацию при прокрутке контента в поле зрения

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

Я использую animate.css и хочу активировать анимацию, когда содержимое прокручивается в поле зрения. Как я могу это реализовать? Вот пример: 

<div class="services__content">
            <div class="services__img animated fadeInLeft">
                <div class="relative">
                    <img src="images/png/services-laptop.png" alt="" class="services__img-relative">
                </div>
            </div>
            <div class="services__content-text aminated fadeInRight">
                <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>

Я прикрепил классы animated fadeInRight, но они работают автоматически, когда я перебираю страницу. Например, он не может запустить анимацию программно, например, когда элемент виден в окне просмотра, для этого у вас есть Javascript. Но как я могу это реализовать?

1 Ответ

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

function isScrolledIntoView(el) {
    var rect = el.getBoundingClientRect();
    var elemTop = rect.top;
    var elemBottom = rect.bottom;

    // Only completely visible elements return true:
    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
    // Partially visible elements return true:
    //isVisible = elemTop < window.innerHeight && elemBottom >= 0;
    return isVisible;
}

function toggleAnimationProCon(element){
let elementtoAnimate= document.getElementsByClassName(element)[0];

if(isScrolledIntoView(elementtoAnimate)){
	prosdiv.classList.add("class");
	consdiv.classList.add("class");
}else{
	prosdiv.classList.remove("class");
	consdiv.classList.remove("class");
}
}

прикрепите этот метод к событию «прокрутка», это поможет определить, виден ли элемент в представлении или нет. если видно, выполняйте свои действия. Я бы посоветовал взглянуть на метод _.throttle, чтобы прикрепить событие к прокрутке, это будет полезно

...