如何交叉淡入 animation 讓兩個圖像一起在滾動上播放

Question

我有一個交叉淡入淡出 animation 用於兩個重疊在一起的圖像，在 hover 上播放

 #cf { position: relative; height: 281px; width: 450px; margin: 0 auto; } #cf img { position: absolute; left: 0; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out; } #cf img.top:hover { opacity: 0; }

 <div id="cf"> <img class="bottom" src="https://ansushop.ir/images/Device_Liquid/L_miss%20angel3.jpg"/> <img class="top" src="https://ansushop.ir/images/Ansu_Sanitizer2.jpg" /> </div>

但我希望交叉淡入淡出發生在滾動而不是 hover 上，任何人都可以為我解釋我如何在滾動上顯示交叉淡入淡出 animation，而不是在 hover 上？

Answer 1

// With jQuery
var iframe = $("#cf-iframe").get(0);
var iframeWindow = iframe.contentWindow ? iframe.contentWindow : iframe.contentDocument.defaultView;
$(iframeWindow).on("scroll", function() {
    var scrollTop = iframeWindow.pageYOffset || iframeWindow.document.documentElement.scrollTop;
    $("img.top", iframeWindow.document).css("opacity", 1 - scrollTop / 1000);
});

    
// With Just JavaScript and No jQuery
var iframe = document.getElementById("cf-iframe");
var iframeWindow = iframe.contentWindow ? iframe.contentWindow : iframe.contentDocument.defaultView;
iframeWindow.onscroll = function() {
    var scrollTop = iframeWindow.pageYOffset || iframeWindow.document.documentElement.scrollTop;
    iframeWindow.document.querySelector("img.top").opacity = 1 - scrollTop / 1000;
};

body {
  height: 1000px;
}

#cf-iframe {
  border: 0;
  margin: 0;
  padding: 0;
  height: 300px;
  width: 300px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<iframe id="cf-iframe" srcdoc='
  <style>
    #cf {
      position: relative;
      height: 281px;
      width: 450px;
      margin: 0 auto;
    }
    body {
    margin:0;
    height:1300px;
    background-color:#fff;
    }
    #cf img {
      position: fixed;
      left: 0;
      top: 0;
    }
  </style>
  <div id="cf">
    <img class="bottom" src="https://ansushop.ir/images/Device_Liquid/L_miss%20angel3.jpg"/>
    <img class="top" src="https://ansushop.ir/images/Ansu_Sanitizer2.jpg" />
  </div>
'></iframe>

在此處查看一個工作示例。