Scroll Animation
This project was about adding simple animations that trigger as you scroll down the page. Each box slides in from the side when it reaches a certain point on the screen.
The idea is to check how far each element is from the top of the viewport and then add a class to trigger a CSS animation when it crosses the “trigger point.”
Here’s the logic in simple terms:
- Detect the user’s scroll position.
- For each element, compare its position to the viewport height.
- If it’s visible enough (past the trigger point), add a class to animate it in; if not, remove the class.
In CSS, I used the transform property to shift the elements off-screen initially (for example, translateX(400px)), and then bring them back to their normal position (translateX(0)) when the active class is added.
Also, a fun little CSS discovery: you can use even as a value in nth-of-type() selectors (for example, :nth-of-type(even)), which makes alternating styles cleaner.
For a live demo of the project, click here
To view the code on GitHub, click here
On to Day 7 ⚡