Question

我正在一个网站上工作，我希望内容在滚动时淡入淡出并在视口中滚动。我有下面的代码在滚动上运行良好 - 但想以两种方式增强它，我似乎无法弄清楚如何实现我想要的......

首先，我希望这个函数在页面加载时触发，所以如果页面在加载时滚动 - 视图中的项目应该淡入淡出并以动画显示 - 目前它们没有。

其次 - 有没有办法稍微细化此代码以指定在动画和淡入动画发生之前需要在视图中的元素的百分比？

function fadeInDivsOScrollToo() {
$('.fade-in').each(function() {
    var top_of_element = $(this).offset().top;
    var bottom_of_element = $(this).offset().top + $(this).outerHeight();
    var bottom_of_screen = $(window).scrollTop() + $(window).innerHeight();
    var top_of_screen = $(window).scrollTop();

    if ((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element) && !$(this).hasClass('is-visible')) {
        $(this).addClass('is-visible');
    }
});

}
$(window).on('load', function(){ fadeInDivsOScrollToo(); });
$(window).on('scroll', function(){ fadeInDivsOScrollToo(); });
$(window).on('resize', function(){ fadeInDivsOScrollToo(); });

使用 CSS：

.fade-in {
  opacity: 0;
  transform: translateY(20vh);
  visibility: hidden;
  transition: opacity 0.8s ease-out, transform 1.2s ease-out;
  will-change: opacity, visibility;
}

.fade-in.is-visible {
  opacity: 1;
  transform: none;
  visibility: visible;
}

Answer 1

别担心 - 最终将这种方法合并并改用 Waypoints。

在滚动/页面加载时淡入元素

1 个答案: