JqueryNo Comments

default thumbnail

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


Below is the html code.

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


.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;}


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.

Be the first to post a comment.

Add a comment