Эффект загрузки изображений с CSS3 анимацией! | Vladmaxi.net
ГлавнаяВеб-разработчикуCSSЭффект загрузки изображений с CSS3 анимацией!
Дата: 16.07.2013 в 22:46 | Просмотров: 6778

Эффект загрузки изображений с CSS3 анимацией!

эффект загрузки, анимация css
Скачатьбесплатно с сервера
Демодемонстрация

Сегодня хотелось бы рассмотреть с Вами эффект плавной загрузки изображений (хотя это может быть что угодно, любой блок). Идея состоит в том, чтобы как только изображения (или что-либо) попадают в поле зрения пользователя, они появились с красивым эффектом анимации. Таких эффектов Вы можете увидеть на демо странице 8 штук!

Возможности создания эффектов безграничны, все зависит от Вашей фантазии. Некоторые из эффекты похожи на те, которые Вы возможно встречали в Google Plus приложении. Другие современные эффекты с изображениями, смотрите здесь.

В этом уроке мы используем популярную библиотеку Masonry, с помощью которой мы создаем красивую сортировку изображений. Если вы хотели бы использовать что-то другое или вообще без этой библиотеки, Вам придется внести свои поправки. Я дума, это несложно.

Пожалуйста, обратите внимание: эти эффекты работает корректно только в браузерах, которые поддерживают соответствующие свойства CSS3. Только современные браузеры! Если у Вас старый браузер, почему бы не обновить его до последней версии?

HTML

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

CSS

Идея состоит в том, чтобы добавить класс для тех изображений или блоков, которые уже показаны в области просмотра пользователя при загрузке страницы. Все, что появляется при прокрутке в окне просмотра получает класс с названием animate. В CSS мы определяют анимацию для каждого эффекта, с индивидуальными стилями. Вот пример стилей 4-го эффекта:

JavaScript

Есть несколько вещей, на которые мы можем повлиять. Для добавления некоторой случайности, можно определить минимальную и максимальную продолжительность анимации. Элементы, которые появляются в окне просмотра будут иметь продолжительность анимации между этими значениями.

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

Если бы мы должны были использовать значение 1, анимация будет срабатывает только тогда, когда объект будет полность виден в области просмотра пользователя (на 100%).

Обратите внимание, что мы должны были удалить переходы Masonry, чтобы не было никакого конфликта с анимацией.

Надеюсь, вам понравился этот небольшой эксперимент и Вы нашли для себя вдохновение! Желаю успехов в создании настоящих шедевров. :)


Данный урок подготовлен для вас командой сайта vladmaxi.net
Источник урока: http://tympanus.net
Перевел: Владислав Бондаренко


Добавить комментарий