如何像视差效果一样在鼠标滚动时更改选定的div中的图像？

Question

首先，非常感谢您检查我的问题。

我在一个网站上工作，需要在选定的div中垂直更改图像，例如视差效果。有3张图片，需要更改。

一个div中有3张图像。检查以下屏幕截图。

这是图像1.这3张图像都是屏幕的一半宽度。

这是图片2。

像这样，还有另一张图像3.右侧的黄色内容没有改变。现在，我只添加了一个简单的滚动条即可滚动。

我需要在这些图像上添加视差效果以垂直滚动或在鼠标滚动时快速更改图像。

关于视差效果的示例，我需要添加：http://pixelcog.github.io/parallax.js/

或者我想应用这种效果：https://codepen.io/RenanB/pen/GZeBNg

<div class="block">
  <img src="https://unsplash.it/1920/1920/?image=1005" data-speed="-1" class="img-parallax">
  <h2>Parallax Speed -1</h2>
</div>
<div class="block">
  <img src="https://unsplash.it/1920/1920/?image=1067" data-speed="1" class="img-parallax">
  <h2>Parallax Speed 1</h2>
</div>
<div class="block">
  <img src="https://unsplash.it/1920/1920/?gravity=center" data-speed="-0.25" class="img-parallax">
  <h2>Parallax Speed -0.25</h2>
</div>
<div class="block">
  <img src="https://unsplash.it/1920/1920/?image=1080" data-speed="0.25" class="img-parallax">
  <h2>Parallax Speed 0.25</h2>
</div>
<div class="block">
  <img src="https://unsplash.it/1920/1920/?random" data-speed="-0.75" class="img-parallax">
  <h2>Parallax Speed -0.75</h2>
</div>
<div class="block">
  <img src="https://unsplash.it/1920/1920/?blur" data-speed="0.75" class="img-parallax">
  <h2>Parallax Speed 0.75</h2>
</div>

但是唯一的问题是，当我对图像应用相同的代码时，这种效果正在激活我的整个网站。

最重要的是，无论用户从何处滚动页面，我都需要滚动到这3张图片，显示全部3张图片，然后向下滚动到下一部分。 我添加了上面的视差代码，但是它适用于整个站点并且无法正常工作。

将上述2种方法应用于我的网站的最佳方法是什么？

Answer 1

好吧，一旦您使用了代码，就需要看到那些脚本和效果是在包装器中构建的，因此视差效果的主要内容是宽度和高度都达到100％，这样您就可以看到延迟和您网站的响应能力，我可以告诉您以下内容：

1. 将图像包装在名称为（image_wrapper）的div中。
2. 为每个图像父div添加一个类，例如（image_section）。
3. 为image_sections指定100％的宽度和高度。

4. 为image_wrapper添加一个高度，如下所示：

   .image_wrapper {height：calc（100％* 4）; } 全高为100％，视差中的图像数量为4