Анимация с пузырьками на 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%;
}
Подготовка к анимации
Метод 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-разработчика.
-
Создано 10.09.2021 10:10:02
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.