曝光时图像淡入

Question

一旦图像显示在视图中，如何淡入？我试图让我的网站响应式的，所以让它在滚动的像素量上淡入是不行的。我需要它被曝光取决于滚动的百分比。或者，如果有一种方法可以让它在视野中淡出？

代码如下：

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

现在我正在做的是，它淡入时，滚动300px和淡出，如果你滚动回来。我喜欢这一点，但我希望它是百分比，这样它就可以响应所有的屏幕分辨率。

谢谢!

Answer 1

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

使用opacity: 0而不是display: none ( $.fadeIn()/$.fadeOut()将切换)允许图像仍然占用文档中的空间，允许您计算图像的高度(需要知道图像的一半在视图中)，而不需要做任何复杂的操作，并且还将在图像淡入时保持页面布局，而不是在切换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>

​