Zoom Image On Scroll | Zoom Image On Scroll Jquery – Codewithrandom

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

Table of Contents

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

output

CSS code

 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


Javascript( Jquery) code

 $(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  JqueryHope 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. 

Written by – Code With Random/Anki 

Leave a Reply