时间戳

首页 > 解决方案 > 当内容滚动到视图中时如何激活动画

javascript - 当内容滚动到视图中时如何激活动画

问题描述

我使用 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。但是我该如何实现呢？

标签： javascriptanimationanimate.css

解决方案

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 方法以将事件附加到滚动，这将很有帮助

推荐阅读