Magnifying Image Zoom Code

Magnifying Image Zoom code
Magnifying Image Zoom

HTML Code:

				
					<div class="magnifying-glass">
  <img decoding="async"
    src="https://diywebsitespro.com/wp-content/uploads/2022/11/maxresdefault-44.jpg"
    alt=""
    class="magnifying-glass__img"
    draggable="false"
  >
</div>

<div class="magnifying-glass__magnifier">
  <div class="magnifying-glass__enlarged-image">
    <img decoding="async"
      src="https://diywebsitespro.com/wp-content/uploads/2022/11/maxresdefault-44.jpg"
      alt=""
      class="magnifying-glass__img"
      draggable="false"
    >
  </div>
</div>
<script>
    const deviceHasPointer = window.matchMedia('(pointer: fine)').matches;
const container = document.querySelector('.magnifying-glass');
const magnifier = document.querySelector('.magnifying-glass__magnifier');
const enlargedImage = document.querySelector('.magnifying-glass__enlarged-image');
const speed = 0.2;

let containerRect = {};
let mouse = { x: 0, y: 0 };
let glass = { x: 0, y: 0 };
let enlargedImagePos = { x: 0, y: 0 };
let aboveImage = false;
let runMovement = false;
    
function init () {
  if (deviceHasPointer) {
    containerRect = container.getBoundingClientRect();

    window.addEventListener('mousemove', this.getMousePos);
    container.addEventListener('mouseenter', this.showGlass);
    container.addEventListener('mouseleave', this.hideGlass);
    moveGlass();
  }
}

function getMousePos (e) {
  mouse.x = e.clientX;
  mouse.y = e.clientY;
}

function moveGlass () {
  
  glass.x = lerp(glass.x, mouse.x, speed);
  glass.y = lerp(glass.y, mouse.y, speed);
  
  
  enlargedImagePos.x = (glass.x - containerRect.left) / containerRect.width * -100;
  enlargedImagePos.y = (glass.y - containerRect.top) / containerRect.height * -100;
   
 
  magnifier.style.transform = `translate(calc(${glass.x}px - 50%), calc(${glass.y}px  - 50%))`;
  
  enlargedImage.style.transform = `translate(${enlargedImagePos.x}%, ${enlargedImagePos.y}%)`;

  if (runMovement)
    requestAnimationFrame(moveGlass);
}


function showGlass () {
  containerRect = container.getBoundingClientRect();
  aboveImage = true;
  runMovement = true;
  magnifier.style.opacity = '1';
  moveGlass();
}

function hideGlass () {
  aboveImage = false;
  magnifier.style.opacity = '0';
  setTimeout(() => { runMovement = false; }, 250);
}

function lerp (a, b, n) {
  return (1 - n) * a + n * b;
}

init();
    
</script>
				
			

CSS Code:

				
					.magnifying-glass {
  display: flex;
  width: 50vw;
 
}

.magnifying-glass__img {
  width: 100%;
}

.magnifying-glass__magnifier {
  position: fixed;
  top: 0; left: 0;
  z-index: 1;
  overflow: hidden;
  width: 15vw;
  max-width: 10rem;
  height: 15vw;
  max-height: 10rem;
  border: 5px solid rgba(white, 0.25);
  border-radius: 50%;
  background-color: transparent;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.magnifying-glass__enlarged-image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
}


				
			
alt="tutorials" alt="Hexagon Portfolio Code" alt="GLOWING NEON TEXT" alt="Water Ripple Effect " alt="Water Ripple Effect code" alt="Rotate And Z-Index" alt="Not Linktree" alt="User IP and Location" alt="auto play video" alt="Click Button to Change Image And Text Using Elementor" alt="7 Day Repeat Countdown Timer" alt="Blog Posts Only" alt="Change Background And Text Colour On Scroll Code"