The essence of chaos in a static medium
HTML structure:
The HTML structure is simple, with a body element that contains a div with the id "chaos-container." This container will hold the chaos elements.
CSS styling:
The CSS styles define the appearance and behavior of the chaos elements and the overall page.
The body element is set to have a black background with no margin and hidden overflow.
The chaos-container is positioned absolutely and takes up the full width and height of the viewport.
The chaos-element class defines the appearance of each chaos element. They are positioned absolutely, with a width and height of 10 pixels, a white background color, and an opacity of 0.5. The pointer-events property is set to "none" to prevent the chaos elements from interfering with mouse events.
CSS animation:
The @keyframes rule defines the animation called "move." It specifies how each chaos element will move across the screen.
The animation starts at 0% and ends at 100%. At the beginning (0%), the elements are not translated (i.e., they have a transform value of translate(0, 0)). At the end (100%), the elements are translated to the bottom right corner of the screen (100vw - 10px and 100vh - 10px), which ensures they stay within the visible area.
JavaScript logic:
The getRandomNumber function generates a random number within a given range. It takes a minimum and maximum value and returns a random number between them using Math.random().
Element creation and animation:
The createChaosElement function is responsible for creating a chaos element and animating it.
Inside the function, a div element is created and assigned the class "chaos-element." Its initial position is set randomly within the viewport using getRandomNumber and the style.top and style.left properties.
The element is appended to the "chaos-container" div.
Random animation duration and delay values are generated using getRandomNumber.
The style.animation property is set to "move" (the defined CSS animation) with the generated duration and an infinite repeat count.
The style.animationDelay property is set to the generated delay.
Element creation loop:
The loop creates 100 chaos elements by calling the createChaosElement function repeatedly.