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

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

Пример:

<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

Наложение фильтра blur для размытия фона под текстом

Анимированный эффект тумана на фоновом изображении средствами CSS

Скрипт, который случайным образом рисует двумерное дерево

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