google-plus-tiles-css-jquery-animation

Создаем ленту новостей в стиле плиток Google Plus

Автор: в CSS, jQuery, Уроки Дата: Май 1, 2013

Нас всегда восхищают новые приложения для iPhone и Android от Google Plus. Новостная анимированная лента в  Google Plus делает просмотр контента приятным и привлекательным за счет анимированных плиток. Было бы не плохо иметь такую же анимацию на своем веб-сайте. В данной статье мы покажем вам, как создать красивую анимационную плитку, для Google Plus приложения, с помощью CSS3 и JQuery. (Webkit-браузер)

Шаг 1: HTML

<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>
<div class="card"></div>

Вы можете добавить столько div, сколько хотите. Мы добавили 8 div для того, чтобы страница была достаточно длинной, чтобы при её прокрутке можно было увидеть эффект.

Шаг 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 кодадля динамического добавления имен классов к объектам, которые появляются в окне, где мы можем анимировать вход анимации:

<script type='text/javascript'>
$(function() {
  $(document.body).on('appear', '.card', function(e, $affected) {
    // add class called “appeared” for each appeared element
    $(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 приложении.

Вот и все. Немного кода и стилей CSS и мы получили стильный эффект анимированных плиток в стиле Гугл Плас.