Применение анимации для сетки изображений на CSS | RUDEBOXВам необходимо организовать сетку для изображений, с динамической подгрузкой изображений, аналогом можно привести стену вконтакте по подгружаемости контента. В данном уроке мы рассмотрим как реализовать данный эффект.  На самом деле возможностей реализовать этот эффект достаточно много, и мы бы хотели поделиться своим опытом. Некоторые эффекты позаимствованы от CSS3 scroll effects, написанных Hakim El Hattab. Для распределения изображений в сетке, воспользуемся библиотекой Masonry.

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

Шаг 1. HTML

Начнем с разметки, каждое наше изображение, будет элементом ненумерованного списка:

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

Применение анимации для сетки изображений на CSS RUDEBOX

Шаг 2. CSS

Теперь перейдем к стилям. Нам необходимо рассмотреть элементы, которым только предстоит появиться, им мы зададим класс animate. В CSS мы анимируем элементы и создаём эффекты:

Стили достаточно объемные, полный их список можно просмотреть в исходниках.

Шаг 3. JS

Все элементы появляющиеся на страницу во время её прокрутки будут анимированы в зависимости от этих значений. К примеру, если мы выставим значение 0, то эффект будет мгновенным. Если 1, то соответственно 1 секунду.

Вот и все. Готово!

Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.

Читайте также: