LPgenerator — профессиональная Landing Page платформа для увеличения продаж вашего бизнеса

  • Более 500 шаблонов в галерее
  • Инструменты оптимизации конверсии
  • Статистика и сквозная аналитика
  • CRM для работы с заявками и телефония
  • Визуальный редактор с расширенным функционалом
  • Быстрая техническая поддержка
  • Множество интеграций
  • Окупаемость инструмента — от 7 дней

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

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

11 марта 2016

Продающие лендинги от отдела
дизайна LPgenerator

Используем технологии:
4U, AIDA, ХПВ, психология влияния Р. Чалдини, управление взглядом
  • 4U
  • AIDA
  • ХПВ
  • психологии влияния Р. Чалдини
  • управления взглядом
  • нейромаркетинг
Готовность от 7 дней
blog comments powered by Disqus
copyright © 2011–2017 by LPgenerator LLC. Все права защищены
Запрещено любое копирование материалов ресурса без письменного согласия владельца — ООО "ЛПгенератор".