提问者:小点点

如何使物品在滚动上按顺序淡入?


目前,我有4个DIV,我已经能够在滚动中使用javascript淡入,并在转换之前将css不透明度设置为0,如下所示:

$(document).ready(function () {
$(window).scroll(function () {
    $('.fadein').each(function (i) {

        var bottom_of_element = $(this).offset().top + $(this).outerHeight();
        var bottom_of_window = $(window).scrollTop() + $(window).height();

        if (bottom_of_window > bottom_of_element) {
            $(this).animate({ 'opacity': '1' }, 1000);
        }

    });
});

我想让相同的DIV在滚动上淡入,一个接着一个。 我见过很多这样的例子,但它们似乎只有在页面加载时才起作用。 如有帮助,不胜感激!


共2个答案

匿名用户

几个月前,当我正在寻找一个类似于您的需求时,我发现了下面的AOS解决方案

只需链接下面的CSS和Javascript,你就可以出发了。 帮我节省了很多时间,希望它也能帮到你。

CSS

<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">

JS

<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>

初始化AOS

<script> AOS.init(); </script>

然后包装任何需要动画的div

<div data-aos="fade-up"></div>

支持站点[https://michalsnik.github.io/aos/]

匿名用户

有很多JS库可以做到这一点,我建议您使用laxx.JS,或者您可以使用纯JS来实现视差效果使用普通JS来实现视差效果