Создание плиточной анимации при помощи 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.

Перевод — Дежурка

Смотрите также: