Boll Animation
Preview
Edit
Download
Run
Download Options
HTML File
Download as .html file
CSS File
Download as .css file
JavaScript File
Download as .js file
Combined HTML
All code in one HTML file
Project ZIP
All files in a ZIP archive
Cancel
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Category Animation</title> <link rel="stylesheet" href="style.css" /> </head> <body> <div class="container"> <div class="category" id="category">Category</div> </div> <script src="script.js"></script> </body> </html>
CSS
* { margin: 0; padding: 0; box-sizing: border-box; } body, html { height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; background: linear-gradient(to bottom right, #7c3aed, #f43f5e); font-family: sans-serif; } .container { position: relative; width: 100%; height: 100vh; overflow: hidden; } .category { width: 100px; height: 100px; background-color: white; color: #333; font-weight: bold; display: flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
JavaScript
const category = document.getElementById("category"); let y = 0; let velocity = 4; let direction = 1; let rotation = 0; function animate() { const maxHeight = window.innerHeight - category.offsetHeight; y += velocity * direction; // Bounce logic if (y >= maxHeight || y <= 0) { direction *= -1; } // Rotation logic rotation += 5; // Apply styles category.style.top = `${y}px`; category.style.transform = `translateX(-50%) rotate(${rotation}deg)`; requestAnimationFrame(animate); } // Start animation animate();
Output Preview
Desktop
Mobile
Fullscreen
