在 mousemove 上的图像之间平滑 blend/transition

Question

最近我访问了一个网站，在这个网站上，mousemove 背景变化很好，它与鼠标位置有某种联系。请看here.

实际上只显示了两张图片，并且它们之间有平滑的过渡。这就是为什么我试图用我自己的 fiddle.

来达到同样的目的

我的 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

函数getElement is from a jquery like library named 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>

在 mousemove 上的图像之间平滑 blend/transition

Smooth blend/transition between images on mousemove

javascript

css

css-transitions

mousemove

mix-blend-mode