Анимация с пузырьками на JavaScript

Анимация с пузырьками на JavaScript

Анимация с пузырьками на JavaScript

Много реалистичные пузырьков разных размеров, с разной скоростью поднимаются вверх, лопаясь на ходу. Как такое возможно сделать на JavaScript? Перед нами стоит многослойная задача. Ну что же, поехали!

Обозначим место для анимации

Пузырьковая анимация будет происходить внутри секции.


// HTML
<section>
    <h2>Bubbles</h2>
</section>

// CSS
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: consolas;
}

body{
    overflow: hidden;
    height: 100vh;
    background: #111;
    background: #000;
}
section{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

Создание функции createCircle()

Как уже понятно из названия, наша функция должна генерировать пузырьки. Иными словами, на ходу создавать большие и маленькие окружности. Занесем в переменные два элемента: section и span (отвечает за внешний вид пузырька). Метод createElement создаст много элементов span (пузырек). Однако нам нужны пузырьки разного калибра для реалистичности. Метод Math.random() возвращает случайные числа, которые мы будем умножать на 60, чтобы исключить образования совсем мелких точек. Метод appendChild() добавит в секцию сгенерированные окружности.


function createCircle() {
    const section = document.querySelector('section')
    const circleEl = document.createElement('span')
    let size = Math.random() * 60;
    let duration = Math.random() * 10;
    circleEl.style.width = 20 + size+'px';
    circleEl.style.height = 20 + size+'px';
    circleEl.style.left = Math.random() * innerWidth + "px";
    section.appendChild(circleEl);
    ...


Внешний вид пузырька с бликом


span{
    position: absolute;
    bottom: -50px;
    width: 100px;
    height: 100px;
    background: transparent;
    border-radius: 50%;
    background-size: cover;
    pointer-events: none;
    box-shadow: inset 0 0 10px rgba(255,255,255,0.5);
    animation: animate 4s linear infinite;
}
span:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    transform: scale(0.25) translate(-70%,-70%);
    background: radial-gradient(#fff,transparent);
    border-radius: 50%;
}

Анимация с пузырьками на JavaScript

Подготовка к анимации

Метод setTimeout вызывает переменную circleEl через заданный промежуток времени для периодического удаления пузырьков. Иначе будет завал.


    setTimeout(() => {
        circleEl.remove()
    }, 4000)
}

Метод setInterval запускает код функции createCircle через указанный промежуток времени. То есть, сдерживает производство окружностей.


setInterval(createCircle, 50)

Движение пузырьков вверх (создание анимации)

Пузырьки создаются, но все еще лежат внизу страницы и никуда не двигаются. В чем суть анимации? Создадим покадровую анимацию: на третьем кадре (100%) для оси Y установим значение -1200% с нулевой прозрачностью. Пузырьки поднимутся вверх и исчезнут (станут прозрачными).


@keyframes animate {
    0%
    {
        transform: translateY(0%);
        opacity: 1;
    }
    60%,99%
    {
        opacity: 1;
    }
    100%
    {
        transform: translateY(-1200%);
        opacity: 0;
    }
    }

Посмотрите пример на CodePen

Переходите на видеокурс по JavaScript и приобретайте необходимые навыки для получения востребованной профессии frontend-разработчика.

Источник

Читайте также