Animated Boll
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>Floating 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(135deg, #1e3a8a, #f43f5e); font-family: sans-serif; } .container { width: 100%; height: 100vh; position: relative; overflow: hidden; } .category { width: 120px; height: 120px; background-color: #ffffff; border-radius: 50%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; font-weight: bold; color: #1e3a8a; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); transition: background-color 0.5s ease; }
JavaScript
const category = document.getElementById("category"); let angle = 0; let hue = 0; function animate() { // Floating animation using sine wave const yOffset = Math.sin(angle) * 30; // up-down float const scale = 1 + 0.05 * Math.sin(angle); // pulsating const rotation = angle * 5; // rotate slowly // Color shift (hue rotation) hue = (hue + 1) % 360; const color = `hsl(${hue}, 100%, 90%)`; // Apply styles category.style.transform = `translate(-50%, calc(-50% + ${yOffset}px)) rotate(${rotation}deg) scale(${scale})`; category.style.backgroundColor = color; // Increment angle angle += 0.05; requestAnimationFrame(animate); } animate();
Output Preview
Desktop
Mobile
Fullscreen
