Как создать эффект сетки для активной кнопки с градиентом прозрачности
В этой статье мы разберём, как реализовать необычный визуальный эффект для активной кнопки: под ней появляется сетка из одинаковых квадратов, которые случайным образом меняют прозрачность. При этом прозрачность квадратов плавно изменяется от центра к краям: ближе к центру - выше прозрачность (квадраты почти исчезают), ближе к краю - ниже (квадраты становятся более плотными). Такой эффект можно использовать для привлечения внимания к кнопке на сайте. Мы будем использовать HTML, CSS и JavaScript для создания анимации.
Базовая структура HTML и CSS
Для начала создадим контейнер с кнопкой и фоном для сетки. Сетку будем строить с помощью div элементов, расположенных в виде таблицы. Каждый квадрат будет иметь класс cell. Основной контейнер .button-wrapper будет содержать кнопку и маску сетки.
<div class="button-wrapper">
<button id="action-btn">Нажми меня</button>
<div class="grid-overlay"></div>
</div>В CSS зададим позиционирование: контейнер - position: relative, а сетка - position: absolute с pointer-events: none, чтобы не блокировать клики по кнопке. Размеры сетки должны совпадать с кнопкой.
Генерация сетки квадратов с помощью JavaScript
Создадим сетку из 5x5 квадратов (можно изменить размер). Каждый квадрат будет иметь начальную прозрачность, зависящую от расстояния до центра. Используем формулу градиента: чем ближе к центру, тем выше opacity (ближе к 1), но по условию нам нужно, чтобы в центре была высокая прозрачность (то есть низкая непрозрачность). Поэтому инвертируем: opacity = 1 - (расстояние / maxDistance). Для случайного изменения прозрачности будем использовать setInterval или requestAnimationFrame.
Расчет градиента прозрачности
Для каждого квадрата вычисляем его центр относительно центра сетки. Расстояние нормализуем до значения от 0 до 1. Затем задаём opacity = 1 - distance. Таким образом, в центре (distance=0) opacity=1 (полностью непрозрачный), но нам нужно наоборот: в центре высокая прозрачность. Поэтому используем opacity = distance. Тогда на краях (distance=1) opacity=1 (непрозрачный), в центре (distance=0) opacity=0 (прозрачный). Это соответствует условию: чем ближе к центру - тем выше прозрачность.
Анимация случайного изменения прозрачности
Для анимации будем каждые 100-200 мс обновлять прозрачность каждого квадрата, добавляя случайное смещение. Чтобы сохранить градиент, будем использовать базовое значение opacity = distance и прибавлять случайное число от -0.3 до 0.3, но ограничивая результат диапазоном [0, 1]. Это создаст эффект мерцания.
const cells = document.querySelectorAll('.cell');
const centerX = gridWidth / 2;
const centerY = gridHeight / 2;
function updateOpacity() {
cells.forEach(cell => {
const baseOpacity = cell.dataset.baseOpacity; // от 0 до 1
const randomShift = Math.random() * 0.6 - 0.3;
let newOpacity = parseFloat(baseOpacity) + randomShift;
newOpacity = Math.max(0, Math.min(1, newOpacity));
cell.style.opacity = newOpacity;
});
}
setInterval(updateOpacity, 150);Добавление эффекта при наведении или активации кнопки
Чтобы сетка появлялась только при наведении или при активации кнопки (например, при клике), добавим обработчики событий. При наведении на кнопку показываем сетку (grid-overlay.style.display = 'block'), при убирании мыши - скрываем. Для активного состояния (например, при зажатой кнопке) используем псевдокласс :active на кнопке и через CSS или JS показываем сетку.
Полный пример кода
Ниже приведён пример, который можно запустить в браузере. Сетка из 7x7 квадратов появляется под кнопкой при наведении и случайно меняет прозрачность с градиентом от центра к краям.
<!DOCTYPE html>
<html>
<head>
<style>
.button-wrapper { position: relative; display: inline-block; }
.grid-overlay {
position: absolute; top: 0; left: 0;
width: 100%; height: 100%;
display: none; /* скрыта по умолчанию */
pointer-events: none;
}
.grid-overlay.active { display: block; }
.cell { float: left; background: #333; width: 14%; height: 14%; margin: 0.5%; }
</style>
</head>
<body>
<div class="button-wrapper">
<button id="action-btn">Наведи курсор</button>
<div class="grid-overlay" id="grid"></div>
</div>
<script>
// Генерация сетки и анимация
</script>
</body>
</html>Советы по настройке
- Измените количество квадратов для более плотной или редкой сетки.
- Регулируйте скорость анимации через интервал в
setInterval. - Для более плавного градиента используйте нелинейную функцию, например, квадратичную:
opacity = Math.pow(distance, 2). - Добавьте CSS-переходы для плавного появления сетки.