'Inertia compensated mouse position in Javascript
I am attempting to add an inertia type effect to my parallax background which is based on the current mouse position.
I have found a script that can take the position of the mouse, and make another object follow it with a set inertia within a fixed frame. However I would like to adapt this script so that I can create a function that I instead pass the current mouse x/y position and desired inertia, and it outputs the inertia compensated mouse position which I can then go on to pass to my parallax effect script. My code is below:
Parallax Script:
(function() {
// Add event listener
document.addEventListener("mousemove", parallax);
const elem = document.querySelector("#text");
// Magic happens here
function parallax(e) {
let _w = window.innerWidth/2;
let _h = window.innerHeight/2;
let _mouseX = e.clientX;
let _mouseY = e.clientY;
let _depth1 = `${50 - (_mouseX - _w) * 0.01}% ${50 - (_mouseY - _h) * 0.01}%`;
let _depth2 = `${50 - (_mouseX - _w) * 0.02}% ${50 - (_mouseY - _h) * 0.02}%`;
let _depth3 = `${50 - (_mouseX - _w) * 0.06}% ${50 - (_mouseY - _h) * 0.06}%`;
let x = `${_depth3}, ${_depth2}, ${_depth1}`;
console.log(x);
elem.style.backgroundPosition = x;
}
})();
Inertia Script:
class MouseTracking{
constructor(containerSelector, followerSelector, inertia = 10){
this.$container = document.querySelector(containerSelector);
this.$follower = document.querySelector(followerSelector);
this.inertia = inertia > 0 ? inertia : 1;
console.log(this.$container);
console.log(this.$follower);
this.getDims();
this.xPos = this.maxW/2;
this.yPos = this.maxH/2;
this.mouseX = this.maxW/2;
this.mouseY = this.maxH/2;
this.bindEvents();
this.update();
}
getDims(){
this.maxW = this.$container.clientWidth;
this.maxH = this.$container.clientHeight;
this.elemWidth = this.$follower.getBoundingClientRect().width;
this.elemHeight = this.$follower.getBoundingClientRect().height;
}
onMouse(e){
this.mouseX = e.clientX;
this.mouseY = e.clientY;
}
bindEvents(){
window.onresize = ()=>{this.getDims()};
this.$container.addEventListener('mousemove', this.onMouse.bind(this));
}
update(){
let dX = this.mouseX - this.xPos - this.elemWidth/2;
let dY = this.mouseY - this.yPos - this.elemHeight/2;
this.xPos += (dX / this.inertia);
this.yPos += (dY / this.inertia);
this.xPrct = (100*this.xPos)/this.maxW;
this.yPrct = (100*this.yPos)/this.maxH;
this.$follower.style.transform = "translate3D("+this.xPos+"px, "+this.yPos+"px, 0)";
requestAnimationFrame(this.update.bind(this));
}
}
new MouseTracking('.background', '#cutout-text', 100);
Codepen for context here
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|
