Lecaw

Учимся создавать Web-сайты

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

July 4, 2013
CSS
529hits

Сегодня я хотел бы рассказать вам про загрузку элементов сетки с различными эффектами. Идея состоит в том, чтобы отобразить элементы в сетке с анимацией, когда они находятся в окне просмотра. Некоторые из эффектов созданы при помощи CSS3 scroll effects от Hakim El Hattab.

Исходные файлы ДЕМО

 

Поскольку 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="#"><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
    } );

Исходные файлы ДЕМО

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(0 голосов)

Оставить комментарий