This project demonstrates scroll-triggered animations on a webpage using HTML, CSS, and JavaScript.
The project showcases the implementation of scroll-triggered animations. As the user scrolls down the page, various elements come to life, providing an engaging and visually appealing experience. The animations are achieved through a combination of CSS and JavaScript.
You can view a live demo here.
-
Scroll-triggered Animations: The project utilizes JavaScript to trigger animations based on the user's scroll position.
The JavaScript code below is responsible for detecting when each section of the webpage comes into view during scrolling. As a section becomes visible, it adds the "is-inview" class to trigger associated animations.
var sections = document.querySelectorAll("section"); var container = document.querySelector(".scroll__container"); container.addEventListener("scroll", function () { sections.forEach((e, i) => { var top = e.getBoundingClientRect().top; if (top == 0) { e.classList.add("is-inview"); } else { e.classList.remove("is-inview"); } }); }); // Dispatch a scroll event to initialize the state based on the initial scroll position container.dispatchEvent(new CustomEvent("scroll"));
More info on: scroll Based Animations | Trigger CSS Animation On Scroll
- Clone the repository:
git clone https://github.com/imJignesh/scroll-animations-demo-1.git
cd scroll-animations-demo-1