Skip to content

Latest commit

 

History

History
38 lines (28 loc) · 1.17 KB

README.md

File metadata and controls

38 lines (28 loc) · 1.17 KB
Raw

Scroll Animation Web App

Welcome to my Scroll Animation Web App! This project showcases various scroll-based animations created using only HTML and CSS.

Live Preview

Check out the live preview of the web app here. (Animations work only on chromium browsers as of now.)

Features

  • 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.

Usage

Simply scroll through the page to see the animations in action. No additional interaction is required.

HTML Structure

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>