试图让图像仅在视口下方淡入滚动

Question

我正在尝试关注 this tutorial 我的投资组合网站。

我几乎已经开始工作了，但不是只有在图像进入 window 时淡入淡出，它正在淡化已经在 window 中的图像。

$(document).on("scroll", function () {
  var pageTop = $(document).scrollTop()
  var pageBottom = pageTop + $(window).height()
  var tags = $("section")

  for (var i = 0; i < tags.length; i++) {
    var tag = tags[i]
    if ($(tag).position().top < pageBottom) {
      $(tag).addClass("visible")
    } else {
      $(tag).removeClass("visible")
    }
  }
})

section {
  opacity: 0;
  transform: translate(0, 20px);
  transition: all 1.5s;
}

section.visible {
  opacity: 1;
  transform: translate(0, 0);
}

Answer 1

这是因为在第一个滚动事件触发之前，所有内容都是隐藏的。要解决此问题，您可以在页面首次加载时手动触发滚动事件，以显示已在视口中可见的 section 元素。

$(document).on("scroll", function () {
  // your code here...
}).trigger('scroll');

还值得注意的是，scroll 事件处理程序会为您滚动的每个像素 触发。由于这种性能在那里很重要，因此值得优化该处理函数。

var $tags = $("section");
var winHeight = $(window).height();

$(document).on("scroll", function() {
  var pageTop = $(document).scrollTop();
  var pageBottom = pageTop + winHeight;
  $tags.each(function() {
    this.classList.toggle(this.offsetTop < pageBottom)
  });
}).trigger('scroll');

$(window).on('resize', function() {
  winHeight = $(this).height();
});

试图让图像仅在视口下方淡入滚动

Trying to have images only below viewport fade in on scroll

html

javascript

css

jquery

css-transforms