Тени и эффекты

Packery — это библиотека для динамического размещения элементов сетки в браузере. Она работает по принципу «masonry layout», позволяя оптимально распределять блоки различного размера. Помимо базового расположения, Packery предоставляет возможность создавать визуально выразительные интерфейсы с применением теней, анимаций и CSS-эффектов.

Настройка базовой структуры элементов

Для применения теней и визуальных эффектов необходимо правильно подготовить HTML-структуру и CSS-стили:

<div class="grid">
  <div class="grid-item"></div>
  <div class="grid-item"></div>
  <div class="grid-item"></div>
</div>

.grid {
  position: relative;
}

.grid-item {
  width: 150px;
  height: 150px;
  background-color: #f0f0f0;
  margin: 10px;
  transition: all 0.3s ease; /* Для плавных эффектов */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Базовая тень */
}

Ключевые моменты:

transition позволяет анимировать изменения размеров, позиции и теней.
box-shadow задаёт базовую тень, создавая глубину элементов.

Анимация появления элементов

Packery поддерживает динамическое добавление и удаление элементов, что позволяет применять эффекты при их появлении:

var grid = document.querySelector('.grid');
var pckry = new Packery(grid, {
  itemSelector: '.grid-item',
  gutter: 10
});

var newItem = document.createElement('div');
newItem.className = 'grid-item';
newItem.style.opacity = 0;
grid.appendChild(newItem);
pckry.appended(newItem);

requestAnimationFrame(() => {
  newItem.style.opacity = 1;
});

Объяснение подхода:

opacity и transition создают эффект плавного появления элемента.
Метод appended Packery автоматически пересчитывает позиции всех элементов.

Добавление динамических теней

Тени можно изменять в зависимости от состояния элемента, например при наведении:

.grid-item:hover {
  transform: scale(1.05);
  box-shadow: 0 10px 20px rgba(0,0,0,0.3);
  z-index: 10; /* Чтобы элемент визуально выделялся над другими */
}

Принципы использования:

transform: scale() усиливает эффект тени, создавая иллюзию подъёма блока.
z-index предотвращает перекрытие соседних элементов при увеличении.
transition гарантирует плавный визуальный эффект.

Сложные эффекты с CSS-переменными

Packery хорошо сочетается с CSS-переменными для создания адаптивных визуальных эффектов:

:root {
  --shadow-color: rgba(0,0,0,0.2);
  --shadow-hover: rgba(0,0,0,0.4);
}

.grid-item {
  box-shadow: 0 2px 5px var(--shadow-color);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.grid-item:hover {
  box-shadow: 0 10px 20px var(--shadow-hover);
  transform: translateY(-5px);
}

Преимущества:

Возможность централизованно управлять эффектами всей сетки.
Лёгкое изменение интенсивности тени и глубины анимации.
Поддержка динамической подстройки под разные темы интерфейса.

Интеграция с JavaScript-анимациями

Для более сложных эффектов, таких как анимация при перестроении сетки, Packery можно комбинировать с библиотекой GSAP или нативными анимациями:

pckry.on('layoutComplete', function() {
  pckry.items.forEach(item => {
    item.element.style.transform = 'scale(1)';
    item.element.style.transition = 'transform 0.4s ease, box-shadow 0.4s ease';
  });
});

Применение:

layoutComplete позволяет запускать анимации после пересчёта позиций.
Можно создавать эффекты «подпрыгивания» или «всплытия» каждого элемента.
Поддерживается сочетание transform и box-shadow для более выразительного визуала.

Комбинирование нескольких эффектов

Для создания насыщенной визуальной сетки можно сочетать:

Тени (box-shadow)
Масштабирование (transform: scale)
Сдвиг по оси Z (z-index)
Плавное появление/исчезновение (opacity)
Цветовые эффекты (filter, background-color)

Пример комплексного эффекта при наведении:

.grid-item:hover {
  transform: scale(1.08) rotate(-1deg);
  box-shadow: 0 12px 25px rgba(0,0,0,0.35);
  background-color: #fff8e1;
  filter: brightness(1.05);
  z-index: 20;
}

Этот подход позволяет создать интерфейс, где элементы визуально «живут», реагируя на взаимодействие пользователя и перестроение сетки.