Introduction
Animations on a webpage can make it more engaging and interactive. One popular animation effect is the on-scroll animation, where elements on a webpage animate as the user scrolls down the page.
In this tutorial, we will learn how to create an animate on-scroll using HTML, CSS, and JavaScript. We will cover how to trigger animations as the user scrolls down the page, creating an effect that brings elements into view when they enter the viewport.
✅ Watch Live Preview 👉👉
Click Here to Download the Code
Table of Contents
What is On Scroll Animation?
It is a type of animation that triggers when a user scrolls down a webpage. As the user scrolls, certain elements on the page animate into view, such as fading in, sliding up, or changing size. These animations can be used to make a website more interactive, engaging, and visually appealing by bringing elements to life as the user scrolls.
For example, when you scroll to a specific part of a webpage, the content or images may smoothly fade in or slide up from the bottom. This helps to draw attention to important content and improve user experience. This animation is commonly used in modern web design to create dynamic and interactive layouts.
How to Animate On Scroll in CSS?
For this, you can use the @keyframes rule for defining animations and then trigger them as the user scrolls. Here’s how:
- Set up the animation: Create an animation using @keyframes to define how an element should change over time (e.g., fading in or sliding up).
- Apply the animation to elements: Use CSS to apply the animation to elements with a specific class or ID.
- Detect scroll position: Use JavaScript to check when an element enters the viewport and add a class to trigger the animation.
You May Also Like
How to Build One Page Website Design using Bootstrap 5
Create Rainbow Gradient Border Animation Using HTML and CSS Only
How to Build a Responsive Gaming Website using HTML and CSS
How to Create Image Accordion using HTML CSS and JavaScript
Set Up Project
Start by creating a folder on your computer for your project. Inside this folder, create the following files:
- index.html
- style.css
- script.js
Source code
Step 1: Adding HTML for the Structure
First, we’ll create multiple sections to represent different elements that we will animate when they come into view.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create On Scroll Animation using HTML CSS and JavaScript</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.11/typed.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&family=Ubuntu:wght@400;500;700&display=swap">
</head>
<body>
<!-- CODE -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Step 2: Adding CSS to Style the Page
Next, let’s add some basic styles for the page and sections. We’ll set a height for the sections to create space for scrolling and make the sections visually distinct.
< /* Your CSS code here */ >
< * { >
< margin: 0; >
< padding: 0 >
< box-sizing: border-box; >
< text-decoration: none; >
< } >
Step 3: Adding JavaScript to Animate on Scroll
Now, let’s write the JavaScript to make the sections animate when they are scrolled into view. We’ll use the window.onscroll event to detect when the user scrolls and then check if the sections are in view.
< // JavaScript Code >
Conclusion
In this tutorial, we have learned how to create on-scroll animations. First, we set up a basic page structure, styled the sections, and used JavaScript to detect when a section enters the viewport.
With just a few lines of code, you can create smooth, engaging animations that react to user scrolling, adding a dynamic touch to your website.
You can further enhance by adding different animations, delays, and customizing the effects to fit your specific needs. This is a great way to enhance user experience, making your webpage more interactive and visually appealing.
20 people bought this
Hurry, Get it Now for Only 40 ₹100
