鼠标移动时图像之间的平滑混合/过渡

Question

最近我访问了一个网站，在 mousemove 上背景变化很好，它以某种方式与鼠标 position 相连。请看这里。

事实上，只有两个图像显示，并且它们之间有一个平滑的过渡。 这就是为什么我试图用我自己的小提琴来达到同样的目的。

我的 html 在这里：

<section id="test">
  <div class="container">
    <div class="row">
      <div class="col-lg-12 text-center link-danger">
      testing background
      </div>
    </div>
  </div>
  
  <div class="masked" id="maskedImages">
    <picture>
      <img src="https://images4.alphacoders.com/108/thumb-1920-1082562.jpg" alt="test" />
    </picture>
        <picture>
      <img src="https://images3.alphacoders.com/108/thumb-1920-1082567.jpg" alt="test" />
    </picture>
  </div>
</section>

CSS：

section#test {
  background:url('https://images5.alphacoders.com/117/thumb-1920-1178361.jpg') center center/cover no-repeat;
}

section#test .masked {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0
}

section#test .masked img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0
}

section#test .masked picture:nth-child(2) img {
    -webkit-mask-image: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0, #000 50%);
    mask-image: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0, #000 50%);
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 200% auto;
    mask-size: 200% auto
}

和 JS（取自该网站）：

var n = $("maskedImages");
    if (n) {
        var o = n.getElement('div[data-vid="time2"] video');
        o && n.addEvent("mousemove", function(e) {
            var t = -2 * e.client.x;
            o.setStyle(("chrome" == Browser.name ? "-webkit-" : "") + "mask-position", t + "px 0")
        });
        var s = n.getElements("img")[1];
        s && n.getParent().addEvent("mousemove", function(e) {
            var t = -2 * e.client.x;
            s.setStyle(("chrome" == Browser.name ? "-webkit-" : "") + "mask-position", t + "px 0")
        })
    }

正如您所想象的，我的解决方案不起作用。 目前我收到一个错误： Uncaught TypeError: n.getElement is not a function

恕我直言，它与定义我的 html 中不存在的 var o 有关（但是当我检查该网站的源代码时，变量中的元素无论如何都与我试图重现的元素无关）。 如何实现这种效果？

我当前的 jsfiddle 在这里： https://jsfiddle.net/kcpuz238/2/

Answer 1

function getElement来自 jquery 之类的名为mootools的库。 老实说，我以前从未听说过它。 我将代码转换为纯 js 并附在下面。

工作演示

 var n = document.querySelector("#maskedImages"); if (n) { var s = n.querySelectorAll("img")[1]; s && n.addEventListener("mousemove", function(e) { var t = -2 * e.clientX; s.style["-webkit-mask-position"] = t + "px 0"; s.style["mask-position"] = t + "px 0"; }) }

 section#test { background: url('https://images5.alphacoders.com/117/thumb-1920-1178361.jpg') center center/cover no-repeat; } section#test.masked { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0 } section#test.masked img { width: 100%; height: 100%; object-fit: cover; position: absolute; left: 0; top: 0 } section#test.masked picture:nth-child(2) img { -webkit-mask-image: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0, #000 50%); mask-image: linear-gradient(-90deg, rgba(0, 0, 0, 0) 0, #000 50%); -webkit-mask-position: 0 0; mask-position: 0 0; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 200% auto; mask-size: 200% auto }

 <section id="test"> <div class="container"> <div class="row"> <div class="col-lg-12 text-center link-danger"> testing background </div> </div> </div> <div class="masked" id="maskedImages"> <picture> <img src="https://images4.alphacoders.com/108/thumb-1920-1082562.jpg" alt="test" /> </picture> <picture> <img src="https://images3.alphacoders.com/108/thumb-1920-1082567.jpg" alt="test" /> </picture> </div> </section>