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

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

Пример:

<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

Помощь по установке кода Ответы на часто задаваемые вопросы и решение типовых ошибок и проблем

Страница находится в стадии разработки

Поддержать блог Любые Ваши (пусть даже и скромные) суммы значительно повышают мотивацию развивать блог, делиться наработками и придумывать новые.

Фон из точек с ховер эффектом на CSS

Капли воды для оформления фона блока или секции

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

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