script.js

$(document).ready(function(){
    $('img').wrap('<div class="pic"><div class="panel">');
    $('.panel').append('<div></div>');
    leftClip = 0;
    topClip = 0;
    topPos = 0;
    leftPos = 0;
    rotate = 0;
    width = $('body').width();
    height = $('body').height();
    pics = $('body').find('.panel div');
    names = ["Bark Twain", "Chewbarka", "Doc McDoggins", "Droolius Caesar", "Franz Fur-dinand", "Fyodor Dogstoevsky & <br>Leo Chew-toy", "Hairy Paw-ter", "Sarah Jessica Barker", "Kareem Abdul Ja-Bark", "Rick & Gary"];
  
    for (let j = 0; j < 11; j++) {
       $(pics[j]).attr('data-num', (j + 1)).append('<span>' + names[j] + '</span>');
    }
  
    $('.panel div').hover(function() {
      $('body').toggleClass('active');
        var picNum = $(this).attr('data-num');
        if (picNum > 6){
          var num =  (rotate - (picNum * 30)) + 6;
        }else{
          var num =  (rotate - (picNum * 30)) + 18;
      } 
        
        
    $(".clip").get(0).style.setProperty( "--zoom", num + "deg");
    });
    $('.panel').mouseleave(function() {
        $('body').removeClass('zoom').removeClass('active'); 
      });
   $('body').click(function(){
           if ($('body').hasClass('active')){
             $(this).toggleClass('zoom');
           }
      });
  
$(document).on('mousemove', function(e){
  
   leftPos = e.pageX;
   topPos = e.pageY;
   leftRot =  leftPos/(width/100);
   leftClip =  (leftPos/(width/30) + 37.5);
   topRot =  topPos/(width/50);
   topShift =  ((height/2) - topPos) * -0.0125;
   topClip =  (topPos/(height/80) + 12.5);
   rotate = (leftRot * 3);
   rotate2 = ((leftRot/6) * 1.8) - 15;
   rotateY = ((topRot * -3.6)/5) - 80;

  $(".wrap").get(0).style.setProperty( "--bg", (leftRot * 6) + "px");
  $(".wrap").get(0).style.setProperty( "--rotateY", rotateY + "deg");
  $(".wrap").get(0).style.setProperty( "--rotateWrap", rotate + "deg");
  $(".clip").get(0).style.setProperty(
          "--clip", "radial-gradient(circle at bottom, transparent, transparent 5vw, rgba(255,255,255,0.5) 5.5vw, rgba(255,255,255,0.5)) calc(" + leftClip + "vw - 100vw) calc(" + (topClip - 100) + "vh + 0.015px) / 200% 100% no-repeat, radial-gradient(circle at " + leftClip + "% " + topClip + "%, transparent, transparent 5vw, rgba(255,255,255,0.5) 5.5vw, rgba(255,255,255,0.5)), linear-gradient(85deg, rgba(255,255,255,0.5) calc(100% - 5.5vw), transparent calc(100% - 5vw)) calc(" + (leftClip - 0) + "vw - 200vw) " + topClip + "vh / 200% 200% no-repeat, linear-gradient(-85deg, rgba(255,255,255,0.5) calc(100% - 5.5vw), transparent calc(100% - 5vw)) calc(" + (leftClip + 0) + "vw + 0vw) " + topClip + "vh / 200% 200% no-repeat");
  $(".clip").get(0).style.setProperty( "--rotate2", rotate2 + "deg");
  $(".clip").get(0).style.setProperty( "--x", rotate2 + "vw");
  $(".clip").get(0).style.setProperty( "--y", topShift + "vh");
});
setTimeout(function(){
  $('body').addClass('ready')
}, 2000);
});