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

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

Пример:

<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

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

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

jQuery плагин Vegas, его установка, настройки, анимация, методы, события и примеры

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