Question

我在这个页面上发现了这个非常酷的效果，向下滚动2/3以查看它这是一个“铅笔”图像（来自不同角度的多个图像），当您向下滚动时会发生变化，如果向上滚动，它也会这样做。链接在这里https://www.fiftythree.com/pencil

无论如何，谁能告诉我如何在我的网站中实现它？或者效果的名称，以便我可以查找。

非常感谢。

Answer 1

三个步骤：

收听滚动事件。
获取当前滚动位置。
根据该位置设置图像源。

var imageEl = document.getElementById('fake-image');

function getSrc(scrollPos) {
  if (scrollPos < 200) return 'image one.jpg';
  if (scrollPos < 300) return 'image two.jpg';
  if (scrollPos < 400) return 'image three.jpg';
  if (scrollPos < 500) return 'image four.jpg';
  if (scrollPos < 600) return 'image five.jpg';
  return 'image six.jpg';
  }

window.addEventListener('scroll', function() {
  imageEl.textContent = getSrc(window.scrollY);
});

#fake-image {
  background: aliceblue;
  height: 5000px;
  padding-top: 50%;
  font-size: 30px;
}

<div id="fake-image">
  Fake image
</div>

您可能想要预先加载图片，或者如另一个答案所说，使用show / hide并拥有多个图片。

Answer 2

您可以通过收听scroll事件来完成此操作。

此事件触发时

计算目标div（图像包装器）的位置
根据你的逻辑，改变里面的图片/或什么都不做..

Answer 3

你可以右键单击chrome中的图像并说出“Inspect element”，你会看到他在容器中有一堆图像都是隐藏的（除了第一个，默认显示）。 / p>

向下滚动时，您有一个侦听滚动事件和滚动条位置值的函数。

根据上面的值，您可以将“活动”类（表示已链接到的门户中的显示/隐藏）设置为相应的图像。

TL / DR：通过收听onscroll事件，拥有多个图像并根据滚动位置显示/隐藏它们。

当您向下滚动网页时，如何更改图片？

3 个答案: