i got this code and i want to resize an image as you scroll down, i use the html widjet but it will not work for the life of me. it just streaches the page. anyone can help?
<!DOCTYPE html>
<html>
<head>
<style> body { overflow: hidden; margin: 0; } \​ .container { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); overflow: hidden; max-height: 100vh; max-width: 100vw; transition: transform 0.3s ease; } \​ .image { max-width: 100%; transform-origin: center center; } </style>
</head>
<body>
<div class=”container”>
<img class=”image” src=”\[http://localhost/Imperialhospitality/wp-content/uploads/2023/04/21.jpg\](http://localhost/Imperialhospitality/wp-content/uploads/2023/04/21.jpg)” alt=”Image”>
</div>
<script> // Get the image element var image = document.querySelector(‘.elementor-image img’); \​ // Add scroll event listener window.addEventListener(‘scroll’, function() { // Calculate the scroll progress as a percentage var scrollProgress = window.scrollY / (document.body.scrollHeight – window.innerHeight); \​ // Calculate the scale factor for the image var scale = 1 – scrollProgress; \​ // Apply the transformation using scale image.style.transform = ‘scale(‘ + scale + ‘)’; }); \​ </script>
</body>
</html>
[ad_2]
From the looks of it, you may be able to just use Elementor for this: