为滚动元素制作动画

Animate element on scroll

本文关键字：动画 元素 滚动      更新时间：2023-09-26

我想在用户滚动页面时为div设置动画。

为此，我实现了以下代码：

var slide = jQuery(".apresentacao-spc-01");
var opening = false;
var closing = false;
var pos = jQuery(window).scrollTop();
jQuery(window).scroll(function() {
    var pos = jQuery(window).scrollTop();
    console.log(pos);
    if (pos > 100) {
        if (!opening) {
            opening = true; closing = false;
            slide.stop().animate({
                'opacity': 1,
                'margin-left': '0px'
            }, 700, function() {
                opening = false;
            });
        }

    } else {
        if (!closing) {
            closing = true; opening = false;
            slide.stop().animate({
                'opacity': 0,
                'margin-left': '-1000px'
            }, 500, function() {
                closing = false;
            });
        }
    }
});

问题是：使用"if（pos>100）{"，如果用户分辨率足够大，可以在他需要滚动之前显示元素，那么除非他开始滚动页面，否则他不会看到元素。

我的问题是：如何获取元素可见时将执行的滚动动画？

我的意思是：如果元素在页面加载时可见，动画会自动启动。。。如果元素在页面加载时不可见，动画将等待滚动到达元素开始。。。

谢谢。

你可以做一些不同的事情。我的第一个想法是用这样的东西查询视口的高度：

var viewportWidth  = document.documentElement.clientWidth
, viewportHeight = document.documentElement.clientHeight

然后，如果它比元素向下的距离高，则触发动画。

一个更动态的解决方案是使用一个功能，自动检查元素是否在视口中，这样，如果你更改了页面上的内容，你就不需要担心调整高度：

function isElementInViewport (el) {
var rect = el.getBoundingClientRect();
return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
    rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
);
}

这一回应值得称赞。提供的链接中有一个使用指南和更多信息。祝你好运

相关文章：