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

Question

最近，我已经找到了一个网站，在Mousemove上，背景变化很好，它与鼠标位置有某种联系。请看一下在这里。

实际上，只有两个图像显示，它们之间有平稳的过渡。这就是为什么我试图用自己的小提琴实现同样的事情的原因。

我的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")
        })
    }

您可以想象，我的解决方案无效。目前，我遇到了一个错误： uck offerate typeError：n.getElement不是一个函数 ，

而IMHO与定义我的html中不存在的var o连接（但是，当我检查了该网站的来源时，无论如何，来自变量的元素与我要复制的元素都没有连接）。如何实现这种效果？

我目前的JSFIDDLE在这里：

Answer 1

函数 getElement来自名为 mootools 的类似 jquery 的库。老实说，我以前从未听说过。我将代码转换为纯 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>