Zoom Image on Scroll code:
1.index.html:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Zoom Image on Scroll</title> <link rel="stylesheet" type="text/css" href="style.css"> <script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script> <script type="text/javascript"> $(window).scroll(function(){ var scroll = $(window).scrollTop(); $(".zoom img").css({ width: (100 + scroll/5) + "%" }) }) </script> </head> <body> <section class="zoom"> <img src="image.jpg"> </section> <section></section> </body> </html>
2.style.css:
body { margin: 0; padding: 0; } section { width: 100%; height: 700px; overflow: hidden; position: relative; } section img { width: 100%; position: absolute; top: 0; left: 50%; transform: translate(-50%); }