Smooth blend/transition between images on mousemove

Question

Recently I've approached a website where on mousemove the background is changing nicely, it is somehow connected with the mouse position. Please take a look here.

In fact there are only two images showing and there is a smooth transition between them. That is why I was trying to achieve the same with my own fiddle.

My html is here:

<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
}

and JS (taken from that website):

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

As you can imagine, my solution does not work. At the moment I'm getting an error: Uncaught TypeError: n.getElement is not a function

And IMHO it's connected with defining the var o which is not present in my html (but when I've checked source of that website, the element from variable is not anyhow connected to that I'm trying to reproduce). How to achieve this effect?

my current jsfiddle is here: https://jsfiddle.net/kcpuz238/2/

Answer 1

The function getElement is from a jquery like library named mootools. Honestly, I have never heard of it before. I transpiled the code to plain js and attached below.

Working demo

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>