Создание плиточной анимации при помощи CSS и jQuery
8 февраля 2014 | Опубликовано в css | 1 Комментарий »
Приложения сервиса Google Plus для iPhone и Android устройств многим кажутся очаровательными. Все изменения в них происходят плавно, но не в ущерб производительности. Плиточная анимация, происходящая при прокручивании ленты новостей, делает еще более приятной прокрутку страницы. Разве не здорово было бы реализовать такую анимацию на вашем веб-сайте?
В этом уроке мы покажем, как создать красивую плиточную анимацию, как в приложениях сервиса Google Plus, с использованием CSS и jQuery. Наш пример гарантированно работает только в браузерах Webkit. Вы можете посмотреть пример внизу, чтобы оценить, как будет выглядеть эффект. Надеемся, Вам понравится.
Демонстрация работы – Скачать исходный код
Шаг 1: HTML
<div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div>
Вы можете добавить столько блоков, сколько хотите. Мы добавили 8 блоков, чтобы страница была достаточно длинной и прокручиваемой, и Вы могли увидеть эффект.
Шаг 2: jQuery
Прежде чем продолжать, нам надо подключить все необходимые плагины jQuery.
<body> ... <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type='text/javascript' src="https://raw.github.com/morr/jquery.appear/master/jquery.appear.js"></script> </body>
В дополнении к основному файлу jQuery, нам нужен плагин под названием Appear, который позволит нам определить, что объект попал в видимую область браузера. Просто подключите эти файлы до закрывающего тега body.
После этого давайте начнем писать код jQuery, чтобы динамически добавлять имена классов объектам, которые появляются в видимой области браузера, чтобы мы могли анимировать вступительную анимацию, используя CSS3.
<script type='text/javascript'> $(function() { $(document.body).on('appear', '.card', function(e, $affected) { /* добавляем класс под названием “appeared” для каждого появившегося элемента */ $(this).addClass("appeared"); }); $('.card').appear({force_process: true}); }); </script>
Добавим этот фрагмент кода сразу после подключения плагинов jQuery. Этот фрагмент определит, что объекты попали в видимую область браузера, и добавит им класс appeared, который мы будем использовать, чтобы анимировать с помощью CSS3 в дальнейшем.
Шаг 3: CSS
body { background: #f3f3f3; } .card { background: white; width: 350px; height: 300px; box-shadow: 0 1px 2px rgba(0,0,0,0.5); border-radius: 3px 3px; margin: 0 auto 10px; -webkit-transition: all 400ms ease; -moz-transition: all 400ms ease; -o-transition: all 400ms ease; transition: all 400ms ease; -webkit-transform: translate3d(0px, 100px, 0) rotateX(-30deg) scale(1.25, 1.25); -moz-transform: translate3d(0px, 100px, 0) rotateX(-30deg) scale(1.25, 1.25); transform: translate3d(0px, 100px, 0) rotateX(-30deg) scale(1.25, 1.25); opacity: 0; } .card.appeared{ -webkit-transform: translate3d(0px, 0px, 0px) rotateX(0) scale(1, 1); -moz-transform: translate3d(0px, 0px, 0px) rotateX(0) scale(1, 1); transform: translate3d(0px, 0px, 0px) rotateX(0) scale(1, 1); opacity: 1; }
Теперь, когда все механизмы на месте, пришло время применять стили к HTML, чтобы создать такой эффект, как Вы видите у приложений сервиса Google Plus. Как Вы видите в стилях выше, мы сначала прячем плитки с помощью свойства opacity, увеличиваем и поворачиваем их немного, чтобы создать впечатление, когда появляется плитка, что она как бы падает из нижней части экрана. Для стилей, применяемых, когда появляется плитка, мы сбрасываем все настройки стилей свойства transform на начальные и настройки стилей свойства opacity в 1, в результате чего мы получим анимацию, как у приложений сервиса Google Plus.
Демонстрация работы – Скачать исходный код
Заключение
Теперь вы можете создать красивый эффект для процесса прокрутки. Использовать прокрутку у приложений сервиса Google Plus очень приятно, так что мы надеемся, что этот эффект будет прекрасным дополнением для вашего веб-сайта.
Автор урока Pete R.
Перевод — Дежурка
Смотрите также:
Комментарии
Оставить ответ
Похожие статьи
-
Сайты, посвященные индустрии красоты
-
Микровзаимодействия: секрет крутых приложений
-
Графический дизайн в стиле гранж
-
15 бесплатных экшенов для ретуширования кожи
-
Крутая абстракция в веб-дизайне
-
Использование множественных фоновых изображений CSS: основы
-
Красивые примеры рисунков спиртовыми чернилами
-
Рисуем иконку мышки в Adobe Illustrator
-
Бесплатная типографика в ботаническом стиле
-
Простая фотоманипуляция рыцаря в огне в Adobe Photoshop
-
Новые примеры страниц О нас
-
Создание элементов, расположенных ровно по центру, с высотой и шириной, заданными в процентах
-
Концептуальная аэрофотосъемка Тома Хегена
-
Бесплатные текстуры для эффекта состаривания
Самые комментируемые
- Текст из крови в Adobe Photoshop
550
- Насколько важно сегодня использовать Web Safe цвета?
539
- 20 наборов кистей для Фотошопа, которые вам пригодятся
531
- Текст из воды в Adobe Photoshop
518
- 45 новых удивительных наборов кистей для творчества
423
- Более 40 фотореалистичных рисунков
205
- Ретро и винтажная типографика в веб-дизайне
194
- 30 примеров фрактального искусства
191