Пожалуйста, обратите внимание: все работает как следует только в тех браузерах, которые поддерживают соответствующие свойства CSS. Только современные браузеры!
Итак, для сетки мы применим неупорядоченный список, и просто добавим класс соответствующего эффекта:
<ul class="grid effect-4" id="grid">
<li><a href="http://drbl.in/fWMM"><img src="images/1.jpg"></a></li>
<li><a href="http://drbl.in/fWPV"><img src="images/2.jpg"></a></li>
<li><a href="http://drbl.in/fWMT"><img src="images/3.jpg"></a></li>
<li><a href="http://drbl.in/fQdt"><img src="images/4.png"></a></li>
<!-- ... -->
</ul>
Идея в том, чтобы добавлять класс к тем элементам, которые уже показаны в окне просмотра при загрузке страницы. Элементы, которые появятся в нем при прокрутке, получат класс с названием animate. В CSS мы определяем анимацию, которая произойдет при каждом эффекте и необходимые индивидуальные стили:
/* Эффект 4: перспектива падения */
.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; }
}
Мы можем установить следующее. Для некоторой произвольности можно определить минимальную и максимальную протяженность анимации. Элементы, появляющиеся в окне просмотра, получат длительность анимации между этими значениями. viewportFactor определяет, какая часть появляющегося элемента будет видна для того, чтобы запустить анимацию. Например, если мы применим значение 0, это будет значить, что оно будет добавлять класс анимации, как только элемент появится в окне просмотра. Если применить значение 1, анимация будет запускаться только тогда, когда весь элемент будет виден в окне просмотра (его 100%).
new AnimOnScroll( document.getElementById( 'grid' ), {
minDuration : 0.4,
maxDuration : 0.7,
viewportFactor : 0.2
} );
Обратите внимание, что нам пришлось удалить преобразования Masonry, чтобы те не конфликтовали с анимацией.
Надеюсь, вам понравится этот маленький эксперимент и послужит вам источником вдохновения!