Как работает
Обработка событий
Скрипт слушает событие click на всём документе (document), поэтому реагирует на клики в любой точке страницы — включая кнопки, ссылки, поля ввода и пустые области.
Создание анимации
При клике:
определяются координаты нажатия (clientX, clientY);
создаются два HTML‑элемента (<div>) с классами .circle и .circle-2;
элементы позиционируются точно в точке клика;
запускается CSS‑анимация расширения и исчезновения.
Визуальный эффект
Круги плавно увеличиваются от 0 до заданного размера.
Толщина границы уменьшается от начального значения до 0.
Прозрачность снижается от 1 до 0.
Через 600 мс элементы удаляются из DOM, чтобы не засорять страницу.
Особенности реализации
Нет внешних зависимостей — работает на чистом JavaScript и CSS.
Производительность — минимальное количество операций, удаление элементов после анимации.
Кросс‑элементность — реагирует на клики по любым элементам страницы.
Z‑индекс — круги всегда сверху других элементов.
Не мешает взаимодействию — круги не перехватывают последующие клики (pointer-events: none).
Технические детали
JavaScript: 25 строк кода.
CSS: 2 анимации и базовые стили.
Совместимость: все современные браузеры (Chrome, Firefox, Safari, Edge).
Размер: < 2 КБ (без учёта содержимого страницы).
Настройка под свои нужды
Вы можете легко изменить:
Цвета кругов — отредактируйте rgba() в ключевых кадрах анимации.
Размеры кругов — поменяйте значения width и height в @keyframes.
Скорость анимации — измените 0.6s в свойстве animation и в setTimeout.
Смещение второго круга — отрегулируйте значения x + 12, y + 12 в функции handleClick.
Толщину границы — настройте border-width в ключевых кадрах.
Как внедрить
Вставьте CSS в секцию <head> вашей страницы или в основной файл стилей.
Добавьте JavaScript перед закрывающим тегом </body> или в отдельный файл.
При необходимости настройте параметры под свой дизайн.
Пример использования
Скрипт подойдёт для:
портфолио и творческих сайтов (визуальное украшение);
интерактивных презентаций;
игровых интерфейсов;
демонстрационных страниц;
любых проектов, где нужно добавить «живости» без нагрузки на производительность.
Результат: ненавязчивая, красивая анимация, которая реагирует на каждое действие пользователя и не мешает основному взаимодействию со страницей.
Код
<style>
.circle {
position: fixed;
border-radius: 50%;
pointer-events: none; /* Круг не перехватывает клики */
transform: translate(-50%, -50%);
animation: expand-fade 0.6s forwards;
z-index: 9999; /* Чтобы круги были сверху всех элементов */
}
@keyframes expand-fade {
0% {
width: 0;
height: 0;
opacity: 1;
border: 10px solid rgba(255, 107, 107, 0.8);
}
50% {
border-width: 5px;
}
100% {
width: 80px;
height: 80px;
opacity: 0;
border: 0 solid rgba(255, 107, 107, 0);
}
}
.circle-2 {
animation-name: expand-fade-2;
}
@keyframes expand-fade-2 {
0% {
width: 0;
height: 0;
opacity: 1;
border: 8px solid rgba(78, 205, 196, 0.9);
}
50% {
border-width: 4px;
}
100% {
width: 60px;
height: 60px;
opacity: 0;
border: 0 solid rgba(78, 205, 196, 0);
}
}
</style>
.circle {
position: fixed;
border-radius: 50%;
pointer-events: none; /* Круг не перехватывает клики */
transform: translate(-50%, -50%);
animation: expand-fade 0.6s forwards;
z-index: 9999; /* Чтобы круги были сверху всех элементов */
}
@keyframes expand-fade {
0% {
width: 0;
height: 0;
opacity: 1;
border: 10px solid rgba(255, 107, 107, 0.8);
}
50% {
border-width: 5px;
}
100% {
width: 80px;
height: 80px;
opacity: 0;
border: 0 solid rgba(255, 107, 107, 0);
}
}
.circle-2 {
animation-name: expand-fade-2;
}
@keyframes expand-fade-2 {
0% {
width: 0;
height: 0;
opacity: 1;
border: 8px solid rgba(78, 205, 196, 0.9);
}
50% {
border-width: 4px;
}
100% {
width: 60px;
height: 60px;
opacity: 0;
border: 0 solid rgba(78, 205, 196, 0);
}
}
</style>
Код
<script>
function createCircle(x, y, className) {
const circle = document.createElement('div');
circle.className = `circle ${className}`;
circle.style.left = `${x}px`;
circle.style.top = `${y}px`;
document.body.appendChild(circle);
// Удаляем элемент после завершения анимации
setTimeout(() => {
circle.remove();
}, 600);
}
function handleClick(event) {
const x = event.clientX;
const y = event.clientY;
// Создаём два круга с небольшим смещением
createCircle(x, y, '');
createCircle(x + 12, y + 12, 'circle-2');
}
// Ключевое изменение: слушаем клик на всём документе, а не только на body
document.addEventListener('click', handleClick);
//htmlstart.ucoz.net
</script>
function createCircle(x, y, className) {
const circle = document.createElement('div');
circle.className = `circle ${className}`;
circle.style.left = `${x}px`;
circle.style.top = `${y}px`;
document.body.appendChild(circle);
// Удаляем элемент после завершения анимации
setTimeout(() => {
circle.remove();
}, 600);
}
function handleClick(event) {
const x = event.clientX;
const y = event.clientY;
// Создаём два круга с небольшим смещением
createCircle(x, y, '');
createCircle(x + 12, y + 12, 'circle-2');
}
// Ключевое изменение: слушаем клик на всём документе, а не только на body
document.addEventListener('click', handleClick);
//htmlstart.ucoz.net
</script>
