How to Zoom In And Zoom Out Image on Scroll?

You can make the image zoom in and zoom out easily using the jquery. Check the below code step by step.

HTML

Below is the html code.

<div class="logo-zoom animate__animated animate__zoomIn">
    <img src="img/logo-home.svg" alt="Logo Vilson">
</div>

CSS

.logo-zoom{ height:200vh;}
.logo-zoom img{ margin:30vh auto 0px; display:flex; position: fixed; left:0px; right:0px; z-index:1; transition:0.3s;}

Jquery

Place below code in footer after jquery.min.js

$(window).scroll(function() {
  var scroll = $(window).scrollTop();
	$(".logo-zoom img").css({
		transform: 'translate3d(-0%, -'+(scroll/100)+'%, 0) scale('+(100 + scroll/0.08)/100+')',
	});
});

We have tested the above code. Try it yourself.