Create Zoom Image On Scroll Using JavaScript
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.
100+ HTML,CSS and JavaScript Projects With Source Code ( Beginners to Advanced)
Code by | N/A |
Project Download | Link Available Below |
Language used | HTML ,CSS and jQuery Code |
External link / Dependencies | Yes |
Responsive | Yes |
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 <p> 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.
How To Build Interest Calculator Using JavaScript
Only Html Code Output
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
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
ADVERTISEMENT
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 Zoom Image On Scroll :
Final Output Of Zoom Image On Scroll Using JavaScript:-
50+ HTML, CSS and JavaScript Projects With Source Code
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