當內容滾動到視圖中時如何激活動畫

Question

我使用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。 但是我該如何實現呢？

Answer 1

 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"); } } 

將此方法附加到“ scroll”事件，將有助於查找天氣元素在視圖中是否可見。 如果可見，請執行您的操作。 我建議也看看_.throttle方法來附加一個事件來滾動，這將很有幫助