目前,我有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在滚动上淡入,一个接着一个。 我见过很多这样的例子,但它们似乎只有在页面加载时才起作用。 如有帮助,不胜感激!
几个月前,当我正在寻找一个类似于您的需求时,我发现了下面的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来实现视差效果