Мыльные пузыри на JS

Пример:

HTML:

<canvas id="bubble"></canvas>

1	<canvas id="bubble"></canvas>

CSS:

#bubble {
	background-image: url(/demo/i/bubble.jpg);
	background-position: center center;
	background-size: cover;
	width: 100%;
	height: 500px;
	margin: 20px 0;
}

#bubble {

background-image: url(/demo/i/bubble.jpg);

background-position: center center;

background-size: cover;

width: 100%;

height: 500px;

margin: 20px 0;

}

JS:

Подключаем библиотеку GSAP (версия 3.2.6)
Подключаем скрипт анимации
Скачиваем пузыри: soap1.png, soap2.png и soap3.png (пути к ним прописываются в самом конце скрипта)

Настройки:

n = 80 - кол-во мыльных пузырей

speed = 0.05 - скорость их движения

wind = 15 - скорость ветра

windVariance = 25 - дисперсия скорости ветра, 1 = без отклонения

Найдено на codepen.io у пользователя Tom Miller
Автор фотографии Daniela Dimitrova

Пример:

HTML:

CSS:

JS:

Настройки:

Смотрите также:

Добавить комментарий: