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

1

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

Шаг 1: HTML

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

Шаг 2: jQuery

Сначала нам нужно добавить все необходимые плагины jQuery, прежде чем мы сможем продолжить:

В дополнение к основному файлу jQuery, нам также нужно добавить другой плагин под названием Appear, который позволит нам определить, когда объекты находятся в окне браузера. Просто добавьте этот файл прямо перед закрывающим body тэгом.

Как только это будет сделано, мы можем приступить к  написанию jQuery кодадля динамического добавления имен классов к объектам, которые появляются в окне, где мы можем анимировать вход анимации:

Добавьте этот фрагмент сразу после того, где мы включили jQuery плагины. Этот фрагмент будет определять, когда объекты находятся в окне браузера и добавлять класс под названием “appeared”, так чтобы мы могли использовать его для анимации с помощью CSS3 в следующем шаге.

Шаг 3: CSS

Теперь, когда все механизмы на местах, пришло время стилизации HTML так, чтобы он вел себя так же, как в Google Plus приложении.

Как вы видите, в приведенном выше стиле, мы скрываем плитки «непрозрачностью» (opacity), затем масштабируем и вращаем их немного для того, чтобы при появлении контента, он выглядел перевернутым снизу. Для стиля при появлении карты, мы сбросили все transform стили на «по умолчанию» и opacity до 1, что приведет к анимации, которую вы видите на Google Plus приложении.

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

Поделиться:
  • m

    А где демо?