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

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

Пример:

<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

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

Анимационный эффект метели для блока или всей страницы

JavaSript и SVG фильтр для создания анимированной кляксы, которая следует за курсором

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