This content originally appeared on DEV Community and was authored by Augusta Igboama
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 ⚡
This content originally appeared on DEV Community and was authored by Augusta Igboama
Augusta Igboama | Sciencx (2025-10-19T21:16:19+00:00) Day 6 | 50 Projects in 50 Days. Retrieved from https://www.scien.cx/2025/10/19/day-6-50-projects-in-50-days/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.