Веб-дизайнеру
Веб-разработчику
Дополнительно
Эффект загрузки изображений с CSS3 анимацией!
Скачать
Демо
↓ Также Вам будет интересно ↓
CSS3 эффект при наведении на изображение + 5 примеров!
Анимированная галерея изображений с эффектами и “сеткой”!
CSS3 эффекты: изображение с блоками подсказок!
Фильтрация изображений с помощью технологий CSS3!
Мини галерея изображений с автопрокруткой | JQuery плагин!
“Retina” эффект лупы – увеличение изображения при наведении!
Сегодня хотелось бы рассмотреть с Вами эффект плавной загрузки изображений (хотя это может быть что угодно, любой блок). Идея состоит в том, чтобы как только изображения (или что-либо) попадают в поле зрения пользователя, они появились с красивым эффектом анимации. Таких эффектов Вы можете увидеть на демо странице 8 штук!
Возможности создания эффектов безграничны, все зависит от Вашей фантазии. Некоторые из эффекты похожи на те, которые Вы возможно встречали в Google Plus приложении. Другие современные эффекты с изображениями, смотрите здесь.
В этом уроке мы используем популярную библиотеку Masonry, с помощью которой мы создаем красивую сортировку изображений. Если вы хотели бы использовать что-то другое или вообще без этой библиотеки, Вам придется внести свои поправки. Я дума, это несложно.
HTML
Таким образом, для всех эффектов мы будем использовать неупорядоченный список ul, просто добавим для каждого эффекта соответствующее название класса:
|
1 2 3 4 5 6 7 |
<ul class="grid effect-4" id="grid"> <li><a href="#"><img src="/web-developer/css/images/1.jpg"></a></li> <li><a href="#"><img src="/web-developer/css/images/2.jpg"></a></li> <li><a href="#"><img src="/web-developer/css/images/3.jpg"></a></li> <li><a href="#"><img src="images/4.png"></a></li> <!-- и так далее... --> </ul> |
CSS
Идея состоит в том, чтобы добавить класс для тех изображений или блоков, которые уже показаны в области просмотра пользователя при загрузке страницы. Все, что появляется при прокрутке в окне просмотра получает класс с названием animate. В CSS мы определяют анимацию для каждого эффекта, с индивидуальными стилями. Вот пример стилей 4-го эффекта:
|
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; } } |
JavaScript
Есть несколько вещей, на которые мы можем повлиять. Для добавления некоторой случайности, можно определить минимальную и максимальную продолжительность анимации. Элементы, которые появляются в окне просмотра будут иметь продолжительность анимации между этими значениями.
ViewportFactor определяет, в какой момент вызвать эффект загрузки с анимацией. Например, если мы будем использовать значение 0, это означает, что класс анимации будет добавлен сразу же, как объект появиться в окне просмотра.
Если бы мы должны были использовать значение 1, анимация будет срабатывает только тогда, когда объект будет полность виден в области просмотра пользователя (на 100%).
|
1 2 3 4 5 |
new AnimOnScroll( document.getElementById( 'grid' ), { minDuration : 0.4, maxDuration : 0.7, viewportFactor : 0.2 } ); |
Обратите внимание, что мы должны были удалить переходы Masonry, чтобы не было никакого конфликта с анимацией.
Надеюсь, вам понравился этот небольшой эксперимент и Вы нашли для себя вдохновение! Желаю успехов в создании настоящих шедевров. 
Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока:
Перевел: Владислав Бондаренко
