Animated Background- Random Circles and Squares

animated-background-random-circles-and-squares.markdown

Animated Background- Random Circles and Squares

Pretty simple. Falling , rotating squares morph into circles and then back. Background color, size, animation duration, and location in X are randomly generated. A new shape is created every 4 seconds. A z index of -1 means in most cases this can run in the background with covering important content or getting in the way. Limits quantity of existing animated to 10, killing of each element after 6 animation iterations to avoid monotony. Animation is pure CSS. Elements created and randomized attributes set in JS.

A Pen by Code_Nit_Whit on CodePen.

License.

script.js

function createMovingShape() {
    const shapes = document.querySelectorAll(".moving-shape");  
    if(shapes.length >9) {
        return;
      }
    var shape = document.createElement('div');
    shape.classList.add('moving-shape');
    var width = Math.floor(Math.random() * (300 - 50 + 1)) + 50;
    shape.style.width = width + 'px';
    var right = Math.floor(Math.random() * (window.innerWidth * 0.9 - (-50) + 1)) + (-50);
    shape.style.right = right + 'px';
    var duration = Math.floor(Math.random() * (8 - 2 + 1)) + 2;
    shape.style.animationDuration = duration + 's';
    var randomColor = 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ')';
    shape.style.backgroundColor = randomColor;
    document.body.appendChild(shape);
    shape.addEventListener('animationend', function() {
        let shapes = document.querySelectorAll(".moving-shape"); 
        console.log(shapes.length);
        shape.remove();
        shapes = document.querySelectorAll(".moving-shape"); 
        console.log(" -1 = " + shapes.length);
    });
}

createMovingShape();
setInterval(createMovingShape, 4000);

style.css

body {
  background-color:black;
  overflow:hidden;
}

.moving-shape {
    width: 100px; 
    aspect-ratio:1;
    background-color: rgba(128, 128, 128, 0.7); 
    opacity: 0.4;
    position: absolute;
    top: -500px;
    z-index: -1;
    animation: rotate-fall 5s linear; 
     animation-iteration-count: 6;
    border: none;
    outline: none;
    border-radius: 0;
    box-shadow: none;
}


@keyframes rotate-fall {
    0% {
        transform: translateY(0) rotate(0deg);
        border-radius: 0;
    }
    50% {
        transform: translateY(500px)rotate(900deg);
        border-radius: 50%;
    }
    100% {
        transform: translateY(calc(1000px)) rotate(1800deg);
        border-radius: 0; 
    }
}