Member-only story
50 Front-End Combat Projects 06 & 07: Scrolling Animations and Splitting Landing Pages
6 min readMay 20, 2024
Today, I’m going to talk about 50 front-end practical projects 06 and 07: scrolling animations(The source code address:https://github.com/bradtraversy/50projects50days/tree/master/scroll-animation) and splitting landing pages(The source code address:https://github.com/bradtraversy/50projects50days/tree/master/split-landing-page).
Let’s start with scrolling animations
1. Project Introduction
This project demonstrates the animation effect of triggering elements using the scrollbar position. As you scroll down the page, pre-hidden elements appear one after the other and smoothly move to their intended positions.
Preview of the effect
2. Core code
HTML
Multiple identical .box elements: Boxes for displaying content.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />…
