Скрипт, реализующий данную анимацию, работает на библиотеке TweenMax

Пример:

HTML:

CSS:

JS:

Подключаем библиотеку TweenMax.min.js и скрипт самой анимации:

Где:

n - Кол-во капель

ch - Высота блока

cw - Ширина блока.

img.src - Капля в base64

Фон канваса задается через CSS

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

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

Анимированный фон для блока или секций с размахивающим руками мороженным

Волна прокатывается по изображению при движении курсора мыши

Красивый эффект на javaScript для анимированного соединения точек

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

Ваш комментарий отправлен!