如何像視差效果一樣在鼠標滾動時更改選定的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