Анимированный фон на CSS + JavaScript

Анимированный фон всей страницы или отдельных блоков сайта производит впечатление и привлекает внимание.

Но важно не перестараться. Иначе можно добиться прямо противоположного эффекта.

Просто движущийся фон в настоящее время можно сделать на чистом CSS. Например, Плавающий background без JavaScript.

Здесь же представлен пример более сложного фона в виде эффекта дождя.

Исходный код этого примера:

<style>
    .wrapper {
        position: relative;
        height: 300px;
        overflow: hidden;
        background: linear-gradient(to bottom, #202020, #111111);
    }
    .rain {
        position: absolute;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 2;
    }
    .rain.back-row {
        z-index: 1;
        bottom: 50px;
        opacity: 0.5;
    }
    .drop {
        position: absolute;
        bottom: 100%;
        width: 15px;
        height: 120px;
        pointer-events: none;
        animation: drop 0.5s linear infinite;
    }
    @keyframes drop {
        0% {
            transform: translateY(0);
        }
        75% {
            transform: translateY(300px);
        }
        100% {
            transform: translateY(300px);
        }
    }
    .stem {
        width: 1px;
        height: 60%;
        margin-left: 7px;
        background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.25));
        animation: stem 0.5s linear infinite;
    }
    @keyframes stem {
        0% {
            opacity: 1;
        }
        65% {
            opacity: 1;
        }
        75% {
            opacity: 0;
        }
        100% {
            opacity: 0;
        }
    }
    .splat {
        width: 15px;
        height: 10px;
        border-top: 2px dotted rgba(255, 255, 255, 0.5);
        border-radius: 50%;
        animation: splat 0.5s linear infinite;
    }
    @keyframes splat {
        0% {
            opacity: 1;
            transform: scale(0);
        }
        80% {
            opacity: 1;
            transform: scale(0);
        }
        90% {
            opacity: 0.5;
            transform: scale(1);
        }
        100% {
            opacity: 0;
            transform: scale(1.5);
        }
    }
</style>
<div class="wrapper">
    <div class="rain front-row"></div>
    <div class="rain back-row"></div>
</div>
<script>
    var makeItRain = function() {
        //очистим все
        $('.rain').empty();

        var increment = 0;
        var drops = "";
        var backDrops = "";

        while (increment < 100) {
            //пара случайных чисел для различных рандомизаций
            //случайное число между 98 и 1
            var randoHundo = (Math.floor(Math.random() * (98 - 1 + 1) + 1));
            //случайное число между 5 и 2
            var randoFiver = (Math.floor(Math.random() * (5 - 2 + 1) + 2));
            //приращение
            increment += randoFiver;
            //добавим новую каплю дождя с различными рандомизациями для определенных свойств CSS
            drops += '<div class="drop" style="left: ' + increment + '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) + '%; animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"><div class="stem" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div><div class="splat" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div></div>';
            backDrops += '<div class="drop" style="right: ' + increment + '%; bottom: ' + (randoFiver + randoFiver - 1 + 100) + '%; animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"><div class="stem" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div><div class="splat" style="animation-delay: 0.' + randoHundo + 's; animation-duration: 0.5' + randoHundo + 's;"></div></div>';
        }

        $('.rain.front-row').append(drops);
        $('.rain.back-row').append(backDrops);
    }
    setTimeout(makeItRain, 1000); //window.onload = makeItRain();
</script>

Оригинал – https://codepen.io/arickle/pen/XKjMZY