От автора: вдохновляемся эффектами загрузки элементов сетки с помощью анимации CSS.
Сегодня мы хотели бы поделиться с вами эффектами загрузки элементов сетки. Идея в том, чтобы показывать элементы в сетке с анимацией, когда те оказываются в окне просмотра. Эти возможности бесконечны и мы хотели бы немного вдохновить вас. Некоторые эффекты взяты из великолепных эффектов прокрутки CSS3 Хакима эль Хаттаба (Hakim El Hattab), а идея навеяна мозаичной анимацией, подсмотренной в приложении Google Plus.
Так как Masonry является популярной библиотекой разметки сеток, мы подумали, что в этом демо-примере использовать ее было бы неплохо. Если хотите применить другую, или вообще обойтись без библиотеки, вам придется удалить инициализацию из скрипта и отрегулировать селекторы и т.д. Это очевидно.
Пожалуйста, обратите внимание: все работает как следует только в тех браузерах, которые поддерживают соответствующие свойства CSS. Только современные браузеры!
Отраженные в демо-примерах великолепные иллюстрации принадлежат Эрике Макли (Erika Mackley). Посетите вебсайт Erika Noel Design или ее магазин. Если желаете, чтобы в одном из демо-примеров были показаны ваши работы, просто свяжитесь с нами.
Итак, для сетки мы применим неупорядоченный список, и просто добавим класс соответствующего эффекта:
|
1 2 3 4 5 6 7 |
<ul class="grid effect-4" id="grid"> <li><a href="//drbl.in/fWMM"><img src="images/1.jpg"></a></li> <li><a href="//drbl.in/fWPV"><img src="images/2.jpg"></a></li> <li><a href="//drbl.in/fWMT"><img src="images/3.jpg"></a></li> <li><a href="//drbl.in/fQdt"><img src="images/4.png"></a></li> <!-- ... --> </ul> |
Идея в том, чтобы добавлять класс к тем элементам, которые уже показаны в окне просмотра при загрузке страницы. Элементы, которые появятся в нем при прокрутке, получат класс с названием animate. В CSS мы определяем анимацию, которая произойдет при каждом эффекте и необходимые индивидуальные стили:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* Эффект 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%).
|
1 2 3 4 5 |
new AnimOnScroll( document.getElementById( 'grid' ), { minDuration : 0.4, maxDuration : 0.7, viewportFactor : 0.2 } ); |
Обратите внимание, что нам пришлось удалить преобразования Masonry, чтобы те не конфликтовали с анимацией.
Надеюсь, вам понравится этот маленький эксперимент и послужит вам источником вдохновения!
Автор: Mary Lou
Источник: //tympanus.net/
Редакция: Команда webformyself.
