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 >
    <div >
      <div >
      testing background
      </div>
    </div>
  </div>
  
  <div  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/

CodePudding user response：

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 >
    <div >
      <div >
        testing background
      </div>
    </div>
  </div>

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