Изменение изображения в зависимости от расположения курсора на странице

Question

Я пытаюсь создать этот эффект - Вращающиеся головы. Он в основном использует местоположение курсора на дисплее для изменения изображения. Так что моя идея - это человек, у которого есть фотографии, чтобы следовать за курсором, как на в этом примере . Проблема в том, что когда я использую этот код, что-то не так, и он не работает. Вероятно, некоторые вещи устарели.

/* Declaring the global variables */
            var mouseX;
            var mouseY;
            var imageOne;
            var imageTwo;
            var imageThree;
            var imageFour;
            var imageFive;
            
            /* Calling the initialization function */
            jQuery(init);
            
            /* The images need to re-initialize on load and on resize, or else the areas
             * where each image is displayed will be wrong. */
            jQuery(window).on("load", init);
            jQuery(window).resize(init);
            
            /* Setting the mousemove event caller */
            jQuery(window).mousemove(getMousePosition);
            
            /* This function is called on document ready, on load and on resize
             * and initiallizes all the images */
            function init(){
                
                /* Instanciate the mouse position variables */
                mouseX = 0;
                mouseY = 0;
                
                /* Instanciate a HeadImage class for every image */
                imageOne = new HeadImage("one");
                imageTwo = new HeadImage("two");
                imageThree = new HeadImage("three");
                imageFour = new HeadImage("four");
                imageFive = new HeadImage("five");
            }
            
            /* This function is called on mouse move and gets the mouse position. 
             * It also calls the HeadImage function to display the correct image*/
            function getMousePosition(event){
                
                /* Setting the mouse position variables */
                mouseX = event.pageX;
                mouseY = event.pageY;
                
                /*Calling the setImageDirection function of the HeadImage class
                 * to display the correct image*/
                imageOne.setImageDirection();
                imageTwo.setImageDirection();
                imageThree.setImageDirection();
                imageFour.setImageDirection();
                imageFive.setImageDirection();
            }
            
 	
var className;
var imageTop;
var imageLeft;
var imageBottom;
var imageRight;

function HeadImage(className){
    
    /* Setting the global instance of classname to the given parameter*/
    this.className = className;
    
    /* Calculating the borders of the image */
    this.imageLeft = jQuery("."+this.className+">.head-image").offset().left;
    this.imageRight = this.imageLeft + jQuery("."+this.className+">.head-image").width();
    this.imageTop = jQuery("."+this.className+">.head-image").offset().top;
    this.imageBottom = this.imageTop + jQuery("."+this.className+">.head-image").height();
    
    /* This function determines where the mouse pointer is relative to the image
     * and displays the correct image accordingly. */
    this.setImageDirection = function(){
        jQuery("."+this.className+">.head-image").css("z-index","0");
        if(mouseX >= this.imageLeft && mouseX <= this.imageRight && mouseY <= this.imageTop){
            jQuery("."+this.className+">.up").css("z-index","1");
        } else if(mouseX < this.imageLeft && mouseY < this.imageTop){
            jQuery("."+this.className+">.up-left").css("z-index","1");
        } else if(mouseX <= this.imageLeft && mouseY >= this.imageTop && mouseY <= this.imageBottom){
            jQuery("."+this.className+">.left").css("z-index","1");
        } else if(mouseX < this.imageLeft && mouseY > this.imageBottom){
            jQuery("."+this.className+">.down-left").css("z-index","1");
        } else if(mouseX >= this.imageLeft && mouseX <= this.imageRight && mouseY >= this.imageBottom){
            jQuery("."+this.className+">.down").css("z-index","1");
        } else if(mouseX > this.imageRight && mouseY > this.imageBottom){
            jQuery("."+this.className+">.down-right").css("z-index","1");
        } else if(mouseX >= this.imageRight && mouseY >= this.imageTop && mouseY <= this.imageBottom){
            jQuery("."+this.className+">.right").css("z-index","1");
        } else if(mouseX > this.imageRight && mouseY < this.imageTop){
            jQuery("."+this.className+">.up-right").css("z-index","1");
        } else{
            jQuery("."+this.className+">.front").css("z-index","1");
            jQuery(".text-holder").css("display","none");
            jQuery("."+this.className+".text-holder").css("display","block");
        }
    };
}

body {
    background-color: rgb(176,176,176) !important;
}

.opala {
    position: fixed;
    height:100vh;
	  width:100%;
	  top:0px;
}

.image-holder{
    position: relative;      
    left:0px;
    height:100vh;
	width:100%;
}

.head-image{
    position: absolute;
    width:46%;
    margin-left:27%;
    bottom:0px;
    z-index: 0;
	height:;
}


.front{
    z-index: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-holder one">          
       <img class="head-image up" src="http://test.valerikarageorgiev.com/wp-content/uploads/2020/01/front.jpg"/>
       <img class="head-image up-left" src="http://test.valerikarageorgiev.com/wp-content/uploads/2020/01/left.jpg"/>
       <img class="head-image left" src="http://test.valerikarageorgiev.com/wp-content/uploads/2020/01/left.jpg"/>
       <img class="head-image down-left" src="http://test.valerikarageorgiev.com/wp-content/uploads/2020/01/left.jpg"/>
       <img class="head-image down" src="http://test.valerikarageorgiev.com/wp-content/uploads/2020/01/front.jpg"/>
       <img class="head-image down-right" src="http://test.valerikarageorgiev.com/wp-content/uploads/2020/01/upright.jpg"/>
       <img class="head-image right" src="http://test.valerikarageorgiev.com/wp-content/uploads/2020/01/upright.jpg"/>
       <img class="head-image up-right" src="http://test.valerikarageorgiev.com/wp-content/uploads/2020/01/upright.jpg"/>
       <img class="head-image front" src="http://test.valerikarageorgiev.com/wp-content/uploads/2020/01/front.jpg"/>
  </div>