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/
Advertisement
Answer
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>