Hello Coder! Welcome to the Codewithrandom blog. In this blog, We learn how to Create a Zoom Image On the Scroll Effect Using JavaScript. When you scroll down and the image zooms and when you scroll up image re-size to the original size.

Javascript was used to develop the zoom image on scroll feature, which makes it simple for users to zoom in and out of the image and move around the website. It is an undertaking that is simple enough for beginners to complete and will help all skepticism disappear.

I hope you enjoy our blog so let's start with a basic HTML Structure for the Zoom Image On Scroll.

HTML Code For Zoom Image On Scroll

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

We need to include a few crucial links inside the HTML before we put the structure. The CSS link will be added inside the head section and the link to the Javascript file will be added before the end of the body tag in order to link the two files together inside our project. We will make separate files for Javascript and CSS in order to manage our project.

Now to add thestructure for our project we will create two section one is the hero section and the other is the container for our the content of the website.Inside the hero section using the img tag we will add the image inside our project.

The heading for our zoom image will then be created using the h1 tag, and using the

element, we will add the lorem text inside the paragraph to add the content to our image scroll.

There is all the Html code for the Zoom Image On Scroll. Now, you can see output without Css and jQuery Code.then we write Css for basic styling of the project and Zoom Image On Scroll Using JQuery Code.

CSS Code 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%);
}

Step1: Using the html tag selector we will set the font family as "Helevicta" and using the font size property we will set the font size as 62.5% . The padding and margin is set as "zero".

Using the h1 tag we will set the font size of our h1 as 6.5rem and using the color property we will set the font color as orange and using the text align property we will align the heading at the center.

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

Step2: Using the p paragraph tag we will set the font size as "1.8rem" and using the margin property we will set the margin as  2rem and we will also add a line height of  2.5rem to our image and using the width property we will set the width as "100%" of our hero section .

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%);
}

jQuery Code For Zoom Image On Scroll

$(window).scroll(function() {
var scroll = $(window).scrollTop();
$("#js-hero img").css({
width: (100 + scroll/5) + "%"
})
})

The window and the scroll method will now be used to make a variable scroll. We can scroll inside the picture and have the text appear over the image by using the width property and the scrolltop() method.

Now that we have completed our Zoom Image On Scroll. Here is our updated output with HTML, CSS, and 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 HTML, CSS, and jQuery. If we made a mistake or any confusion, please drop a comment to reply or help you learn easily.

Written by - Code With Random/Anki