'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