Вам необходимо организовать сетку для изображений, с динамической подгрузкой изображений, аналогом можно привести стену вконтакте по подгружаемости контента. В данном уроке мы рассмотрим как реализовать данный эффект. На самом деле возможностей реализовать этот эффект достаточно много, и мы бы хотели поделиться своим опытом. Некоторые эффекты позаимствованы от CSS3 scroll effects, написанных Hakim El Hattab. Для распределения изображений в сетке, воспользуемся библиотекой Masonry.
Если вы не хотите использовать данную библиотеку или какую-либо другую, то вам нужно убрать инициализацию из скрипта. Такое решение станет отличным дополнением для стены изображений или для персонально странички с фотографиями, мы привели пример различных вариантов анимации, теперь давайте рассмотрим как это реализовать.
Шаг 1. HTML
Начнем с разметки, каждое наше изображение, будет элементом ненумерованного списка:
<ul>
<ul>
<li><a href="http://ссылка/fWMM"><img alt="" src="images/1.jpg" /></a></li>
<li><a href="http://ссылка/fWPV"><img alt="" src="images/2.jpg" /></a></li>
<li><a href="http://ссылка/fWMT"><img alt="" src="images/3.jpg" /></a></li>
<li><a href="http://ссылка/fQdt"><img alt="" src="images/4.png" /></a></li>
</ul>
</ul>
<ul id="grid"><!-- ... --></ul>
Как вы уже догадались, задумка состоит в том, чтобы добавлять специфический класс изображению когда то попадает под зону просмотра.
Шаг 2. CSS
Теперь перейдем к стилям. Нам необходимо рассмотреть элементы, которым только предстоит появиться, им мы зададим класс animate. В CSS мы анимируем элементы и создаём эффекты:
.grid.effect-4 {
perspective: 1300px;
}
.grid.effect-4 li {
transform-style: preserve-3d;
}
.grid.effect-4 li.animate {
transform: translateZ(400px) translateY(300px) rotateX(-90deg);
animation: fallPerspective .8s ease-in-out forwards;
}
@keyframes fallPerspective {
100% { transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}
Стили достаточно объемные, полный их список можно просмотреть в исходниках.
Шаг 3. JS
Все элементы появляющиеся на страницу во время её прокрутки будут анимированы в зависимости от этих значений. К примеру, если мы выставим значение 0, то эффект будет мгновенным. Если 1, то соответственно 1 секунду.
new AnimOnScroll( document.getElementById( 'grid' ), {
minDuration : 0.4,
maxDuration : 0.7,
viewportFactor : 0.2
} );
Вот и все. Готово!
Материал взят из зарубежного источника - tympanus.net/codrops/2013/07/02/loading-effects-for-grid-items-with-css-animations и представлен исключительно в ознакомительных целях.
