Question

如果图像在视野中，我该如何淡入？我试图让我的网站响应，所以让它淡入滚动的像素量不会。我需要根据滚动的百分比来曝光它。或者，如果有一种方法可以让它在视野中消失？

以下是代码：

const a = (
      |
    );

现在我正在进行的是它在滚动300px时淡入淡出，如果向后滚动则淡出。我喜欢这样，但我希望它以百分比表示，以便它能响应所有屏幕分辨率。

谢谢！

Answer 1

此处＆＃39;一个功能showImages()，用于衡量您的$.scrollTop() + $(window).height()以建立视口底部的滚动点，并会在隐藏图像时添加一个类图像的一半已经通过视口的底部。我在$(document).ready();和$(window).on('scroll');上调用它，以便在页面加载时和滚动时在视口中加载图像。

使用opacity: 0代替display: none（$.fadeIn()/$.fadeOut()将切换的内容）允许图片仍然占用文档中的空间，允许您计算它的高度（需要知道什么时候图像的一半在视图中）而不必做任何棘手的事情，并且当图像淡入时也将保持页面布局，而如果你切换display则跳到页面。

还有一些库可以帮到你。 jQuery waypoints是一个受欢迎的。

＆＃13;

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();
})

＆＃13;

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

＆＃13;

<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>

＆＃13;

曝光时的图像淡入

1 个答案: