Размытые мерцающие окружности

Кроме появления и исчезания окружности двигаются в противоположную строну от направления курсора мыши .

Пример:

<canvas id="blurred"></canvas>

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

#blurred {
	width: 100%;
	height: 500px;
	margin: 20px 0;
}

#blurred {

width: 100%;

height: 500px;

margin: 20px 0;

}

Подключаем библиотеку GSAP (версия 3.2.6)
Подключаем скрипт анимации
Скачиваем фон: redLightBg.jpg и окружности: blurLight1.png, blurLight2.png, blurLight3.png (пути к ним прописываются в самом конце скрипта) или используем иные изображения для получения других эффектов.

n = 80 - кол-во окружонстей

speed = 0.15 - скорость

Найдено на codepen.io у пользователя Tom Miller

Поднимающиеся вверх мыльные пузыри реализованные на библиотеке GSAP

Фоновый эффект на JavaScript, демонстрирующий поверхность моря или океана

Эффект со случайным турбулентным фоном для блока или секции

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