Welcome to my Scroll Animation Web App! This project showcases various scroll-based animations created using only HTML and CSS.
Check out the live preview of the web app here. (Animations work only on chromium browsers as of now.)
- Auto Rotate: Elements smoothly rotate as you scroll down the page.
- Auto Show: Hidden elements gradually appear into view upon scrolling.
- Auto Blur: Elements become blurred as they scroll into or out of view.
Simply scroll through the page to see the animations in action. No additional interaction is required.
The HTML structure is simple and semantic, using basic elements to demonstrate the animations.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Animations</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="autoRotate">Rotate Animation</div>
<div class="autoShow">Show Animation</div>
<div class="autoBLur">Blur Animation</div>
</body>
</html>