Загрузка элементов сетки при помощи CSS анимации

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

Сложность

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

Таким образом, мы будем использовать неупорядоченный список для нашей сетки, а также добавим соответствующие классы эффектов:

<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 мы определим анимацию, которая будет работать для каждого эффекта и отдельных стилей, которые мы будем использовать для наших элементов:

/* Effect 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
    } );
ДЕМО СКАЧАТЬ

Перевод статьи Loading Effects for Grid Items with CSS Animations

Тэги: animategrid

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.