Пример:
HTML:
|
1 |
<canvas id="bubble"></canvas> |
CSS:
|
1 2 3 4 5 6 7 8 |
#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
Добавить комментарий: