Table of Contents
Zoom Image On Scroll | Zoom Image On Scroll Jquery – Codewithrandom
Welcome🎉 to Code With Random blog. In this blog, we learn how we create Zoom Image On Scroll. We use HTML, Css, and Jquery for this Zoom Image On Scroll. I hope you enjoy our blog so let’s start with a basic HTML structure for the Zoom Image On Scroll.
HTML Code
<section class="hero-section" id="js-hero">
<img src="https://source.unsplash.com/uN1m9Ca0aqo"
alt="Photo by Tamara Bellis on Unsplash" />
</section>
<section class="container">
<h1>Summer In Winter</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.</p>
</section>
<!-- JavaScript & jQuery -->
<script src="https://code.jquery.com/jquery-3.3.1.js"
integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
crossorigin="anonymous">
</script>
<script src="js/index.js"></script>
There is all the HTML code for the Zoom Image On Scroll. Now, you can see an output with Zoom Image On Scroll then we write Jquery for Zoom Image On Scroll.
html {
font-family: Helvetica, Arial, sans-serif;
font-size: 62.5%;
}
body {
margin: 0;
padding: 0;
}
h1 {
font-size: 6.5rem;
color: #f39c12;
text-align: center;
font-weight: 300;
}
p {
font-size: 1.8rem;
color: #777;
margin: 2rem 0;
line-height: 2.5rem;
}
p:first-child {
margin-top: 0;
}
.container {
width: 75%;
margin: 0 auto;
}
.hero-section {
width: 100%;
height: 70rem;
overflow: hidden;
position: relative;
}
.hero-section img {
width: 100%;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%);
}
Css Updated output
$(window).scroll(function() {
var scroll = $(window).scrollTop();
$("#js-hero img").css({
width: (100 + scroll/5) + "%"
})
})
Final output
Now that we have completed our Jquery section, Here is our updated output with Jquery. Hope you like the Zoom Image On Scroll. you can see the output video and project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕!
In this post, we learn how to create Zoom Image On Scroll using simple HTML & CSS, and Jquery. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.