javascript - 曝光时图像淡入

Question

如何在图像出现后淡入淡出？我试图让我的网站响应，所以让它淡入滚动的像素数量是行不通的。我需要它根据滚动百分比显示出来。或者是否有办法让它在视野中时淡入？

代码如下:

$(document).ready(function(){
    $(window).bind("scroll", function() {
if ($(this).scrollTop() > 300) {
    $("#bluprintdesign").fadeIn();
} else {
    $("#bluprintdesign").stop().fadeOut();
}

现在我要做的是当滚动 300 像素时淡入，如果向上滚动则淡出。我喜欢这样，但我希望它以百分比表示，以便它响应所有屏幕分辨率。

谢谢!

Answer 1

这是一个函数 showImages()，它将测量您的 $.scrollTop() + $(window).height() 以建立视口(viewport)底部的滚动点，当图像的一半通过视口(viewport)底部时，将向隐藏图像添加一个类。我在 $(document).ready(); 和 $(window).on('scroll'); 上调用它，以便它将图像加载到页面加载和滚动时的视口(viewport)。

使用 opacity: 0 而不是 display: none($.fadeIn()/$.fadeOut() 将切换)允许图像仍然占据文档中的空间，允许您计算它的高度(需要知道什么时候图像的一半在 View 中)而无需做任何棘手的事情，并且当图像淡入时还将保持页面布局，如果您切换 display，则页面会跳来跳去。

还有一些图书馆可以为您完成这项工作。 jQuery waypoints是一个流行的。

function showImages() {
  var $window = $(window),
    thresh = $window.scrollTop() + $window.height();
  $('img:not(.show)').each(function() {
    if (thresh > $(this).offset().top + ($(this).outerHeight() / 2)) {
      $(this).addClass('show');
    }
  });
}
$(window).on('scroll', function() {
  showImages();
})
$(function() {
  showImages();
})

section {
  height: 200vh;
  border-top: 1px solid black;
}
img {
  opacity: 0;
  transition: opacity .25s;
}
.show {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</section>
<section>
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</section>
<section>
  <img src="http://kenwheeler.github.io/slick/img/fonz1.png">
</section>