Created
November 28, 2025 19:38
-
-
Save avinashselvam/8522b8f81d23cad109e80e8c1edffb04 to your computer and use it in GitHub Desktop.
Spinning Boxes Effect
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <title>Animated White Noise</title> | |
| <style> | |
| @property --angle { | |
| syntax: "<angle>"; | |
| inherits: false; | |
| initial-value: 0deg; | |
| } | |
| @property --scale { | |
| syntax: "<number>"; | |
| inherits: false; | |
| initial-value: 0.5; | |
| } | |
| body { | |
| overflow: hidden; | |
| margin: 0; | |
| font-family: "helvetica"; | |
| } | |
| .container { | |
| transform-style: preserve-3d; | |
| position: relative; | |
| margin: 10vh 25vw; | |
| } | |
| .box { | |
| width: 200px; | |
| height: 50px; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| position: absolute; | |
| transform-origin: center; | |
| text-align: center; | |
| animation: | |
| spin 5s linear infinite, | |
| scalewave 1.25s linear infinite alternate; | |
| } | |
| @keyframes spin { | |
| 0% { | |
| --angle: 360deg; | |
| } | |
| 100% { | |
| --angle: 0deg; | |
| } | |
| } | |
| @keyframes scalewave { | |
| 0% { | |
| --scale: 0.5; | |
| } | |
| 100% { | |
| --scale: 1; | |
| } | |
| } | |
| </style> | |
| <script> | |
| function makeBox(parent, index) { | |
| const faces = ["front", "right", "back", "left"]; | |
| const box = document.createElement("div"); | |
| box.className = "container"; | |
| faces.forEach((f, fidx) => { | |
| const div = document.createElement("div"); | |
| div.style.backgroundColor = fidx % 2 ? "red" : "blue"; | |
| div.style.color = fidx % 2 ? "black" : "white"; | |
| div.style.top = `${index * 25}px`; | |
| div.style.transform = `rotateY(calc(var(--angle) - 45deg + ${fidx * 90}deg)) \ | |
| translateZ(calc(100px * var(--scale))) scale(var(--scale))`; | |
| div.className = `box ${f}`; | |
| div.style.animationDelay = `${Math.abs(5 - index) * 0.1}s, ${Math.abs(5 - index) * 0.4}s`; | |
| div.innerHTML = "<h1>28.11.2025</h1>"; | |
| box.appendChild(div); | |
| }); | |
| parent.appendChild(box); | |
| } | |
| window.onload = () => { | |
| const root = document.body; | |
| const order = [0, 1, 2, 3, 4, 10, 9, 8, 7, 6, 5]; | |
| for (let i = 0; i < 11; i++) makeBox(root, order[i]); | |
| }; | |
| </script> | |
| </head> | |
| <body></body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment