stagger

Masonry — это библиотека для организации сетки элементов с «кирпичной» компоновкой, где элементы располагаются оптимально по высоте и ширине. Свойство stagger отвечает за задержку появления элементов при их рендеринге, создавая эффект последовательной анимации. Оно особенно полезно для плавного отображения больших массивов контента, улучшая визуальное восприятие страницы.

stagger задается в миллисекундах и управляет интервалом между анимациями соседних элементов. Например, при stagger: 100 каждый следующий элемент будет появляться с задержкой в 100 мс относительно предыдущего.

var grid = document.querySelector('.grid');
var msnry = new Masonry(grid, {
  itemSelector: '.grid-item',
  columnWidth: 200,
  gutter: 20,
  stagger: 100
});

В этом примере каждый элемент .grid-item будет плавно появляться один за другим с интервалом 100 мс.

Применение stagger с анимациями CSS

Для эффективного использования stagger требуется сочетание с CSS-анимациями. Masonry сам по себе управляет позицией элементов, а CSS отвечает за их визуальное появление. Например:

.grid-item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.grid-item.is-visible {
  opacity: 1;
  transform: translateY(0);
}

В JavaScript добавление класса is-visible через Masonry:

imagesLoaded(grid, function() {
  msnry.layout();
  var items = grid.querySelectorAll('.grid-item');
  items.forEach(function(item, index) {
    setTimeout(function() {
      item.classList.add('is-visible');
    }, index * 100); // Здесь совпадает с stagger
  });
});

Такой подход обеспечивает плавный каскадный эффект появления элементов, где stagger задает интервал между включением анимации для каждого элемента.

Динамическая подгрузка контента

При добавлении новых элементов в сетку stagger позволяет анимационно вписать их в существующую компоновку:

var newItems = document.createElement('div');
newItems.classList.add('grid-item');
grid.appendChild(newItems);

msnry.appended(newItems);

setTimeout(function() {
  newItems.classList.add('is-visible');
}, 0);

Для нескольких элементов можно использовать цикл с задержкой, аналогично предыдущему примеру, чтобы сохранить эффект последовательного появления.

Комбинирование с imagesLoaded

Часто сетка содержит изображения разного размера, и Masonry корректно располагает элементы только после загрузки всех изображений. Использование stagger совместно с imagesLoaded обеспечивает синхронное появление элементов после полной загрузки контента:

imagesLoaded(grid, function() {
  msnry.layout();
  var items = grid.querySelectorAll('.grid-item');
  items.forEach(function(item, i) {
    setTimeout(() => item.classList.add('is-visible'), i * 120);
  });
});

Такой метод предотвращает «прыжки» сетки при асинхронной загрузке изображений и делает анимацию более плавной и последовательной.

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

  • Интервал: ключевой параметр — количество миллисекунд между появлениями элементов. Примеры: stagger: 50 — быстрый каскад, stagger: 200 — медленный, плавный эффект.

  • Комбинация с transform: использование translateY или scale создаёт интересные динамичные появления элементов.

.grid-item {
  transform: scale(0.8) translateY(30px);
  opacity: 0;
  transition: transform 0.6s ease, opacity 0.6s ease;
}

.grid-item.is-visible {
  transform: scale(1) translateY(0);
  opacity: 1;
}
  • Сложные анимации: можно комбинировать stagger с разными переходами opacity, rotation или blur для многослойного визуального эффекта.

Ограничения и производительность

  • Слишком маленький интервал stagger при большом количестве элементов может приводить к перегрузке браузера и резкому снижению FPS.
  • Для динамического контента рекомендуется сначала загрузить и расположить элементы, а затем применять stagger через CSS-классы, чтобы избежать конфликтов между Masonry и анимацией.
  • Необходимо учитывать размеры сетки и браузерное перераспределение элементов: при изменении ширины окна Masonry пересчитывает позиции, но задержка появления не должна сбиваться.

stagger в Masonry — инструмент для создания визуально привлекательных, последовательных анимаций элементов сетки, особенно в сочетании с CSS-переходами и динамической подгрузкой изображений. Он позволяет контролировать темп и последовательность визуального появления контента, делая интерфейс более живым и отзывчивым.

Оглавление