Zoom Image On Scroll Using HTML,CSS and jQuery

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>

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

50+ HTML, CSS & JavaScript Projects With Source Code

Html + Css Updated Output Zoom Image On Scroll

 

 

 

 

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.

Video Output:

Final Output Zoom Image On Scroll