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

google

Нас всегда восхищают новые приложения для 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="//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 и мы получили стильный эффект анимированных плиток в стиле Гугл Плюс.

Высоких конверсий!

11-03-2016