Лого www.SiteHere.ru

Google Tips — красивые записки с анимацией для вашего сайта

Google Tips - красивые записки с анимацией для вашего сайта

Возможно вы помните урок, в котором мы создавали записки с помощью CSS3. Записки в том уроке были похожи на записки которые можно увидеть на Windows 7. Если вы не видели и пропустили прошлый урок, тогда вы сможете найти ссылку на него в полной записи. А в этом уроке мы создадим записки, которые использует Google. Привлекательные записки с красивой анимацией при раскрытии записки. Также в примерах есть 5 демо с разными настройками, поэтому вы можете выбрать тот, который больше всего вам подходит.

Урок, в котором мы создавали записки с помощью CSS3 — Создание эффекта записки с помощью CSS3

Примеры записок можно увидеть здесь:

Посмотреть примерСкачать

Как пользоваться?

HTML часть

Необходимо скачать и подключить библиотеку jQuery(она находится здесь) и jquery.tip_cards.js(сам плагин и стили можно скачать здесь):

1
2
3
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery.tip_cards.js"></script>
<link rel="stylesheet" type="text/css" href="css/tip_cards.css" />

После этого нужно определиться будут ли наши записки вращающимися или нет. Дело в том что для вращающихся записок и невращающихся используются разная разметка. Если вы хотите точно такие же(вращающиеся) записки как на Google, тогда используйте этот код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<body>
  ..
  <ul class="tips">
    <li>
      <div class="tc_front">
        <a href="#tip1">...</a>
      </div>
      <div class="tc_back">...</div>
      <div id="tip1" class="tip">
        <div class="tc_front">...</div>
        <div class="tc_back">...</div>
      </div>
    </li>
  ..
</body>

И как видите здесь есть две стороны. А вот если вам нужна лишь одна сторона и нет необходимости во вращении, тогда вам нужен следующий код:

1
2
3
4
5
6
7
8
9
10
11
<body>
  ..
  <ul class="tips">
    <li>
      <a href="#tip1">...</a>
      <div id="tip1" class="tip">
        ...
      </div>
    </li>
  ..
</body>

jQuery часть

После того как с разметкой закончено необходимо написать небольшой код на Javascript. Плагин сам определит какой тип записок вам нужен, а вам лишь нужно задать другие настройки:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(".tips").tip_cards({
    entrance: "bottom",
    column: 4,
    margin: "1%",
    selector: "> li",
    hoverTilt: "right",
    triggerSelector: "> li a",
    cardFlyDirection: "all",
    closeButton: "X",
    flipButton: "Flip",
    navigation: true,
    beforeOpen: null,
    afterOpen: null
  });

Рассмотрим эти свойства более подробно:

  • entrance — данное свойство отвечает то направление вылета записки при анимации. Оно может принимать следующие значения — «bottom», «left», «right», и «top». По умолчанию используется значение «bottom».
  • column — свойство отвечает за выравнивание записок по столбцам. По умолчанию данное свойство равно 4.
  • margin — определяет расстояние между записками в процентах. По умолчанию равно «1%».
  • selector — это селектор, по которому определяется всё остальное содержимое записки. Конечно, вы можете изменять структуру списка, и тогда необходимо будет указать свой селектор. По умолчанию это «> li».
  • hoverTilt — определяет в какую сторону поворачивать записку при наведении. Может принимать значения «right», «left», «up», и «down». По умолчанию «right».
  • triggerSelector — в этом плагине вы также можете определять свой переключатель, а также тот переключатель, который появляется во всплывающем окне. По умолчанию используется ссылка, которая находится в списке.
  • cardFlyDirection — это свойство позволяет задать направление в котором появляется всплывающее окно. Может принимать следующие значения «all», «top», «bottom», «left», и «right».
  • closeButton — с помощью данного свойства можно определить текст для кнопки закрытия окна. А также можно задать значение false и тогда будет использован текст «X».
  • flipButton — в отличие от прошлого свойство, с помощью данного можно определить текст для кнопки поворота. А также можно задать значение false и тогда будет использован текст «Повернуть».
  • navigation — использовать или не использовать навигацию для просмотра записок одну за одной.
  • beforeOpen — функция, которая будет вызвана до вызова всплывающего окна. Ее нужно писать следующим образом:

    1
    2
    3
    4
    5
    
    $(".tips").tip_cards({
      beforeOpen: function () {
        ...
      }
    });

  • beforeOpen — функция, которая будет вызвана после вызова всплывающего окна. Ее нужно писать следующим образом:

    1
    2
    3
    4
    5
    
    $(".tips").tip_cards({
      afterOpen: function () {
        ...
      }
    });

Вывод

Красивые записки для вашего сайта с классным эффектом.

Успехов!

Источник: http://www.onextrapixel.com/2014/01/23/create-a-google-tips-card-animation-for-your-website-with-jquery-tip-cards/

Google Tips — красивые записки с анимацией для вашего сайта 5.00/5 (100.00%) 1 голос(ов)

Понравилась статья - расскажи друзьям! :)

2 комментария к записи
  • виктор

    Спасибо, огромное!
    На blogspot/blogger, интересно jQuery будет работать?

     
    • Юрий

      Виктор, конечно будет работать. Для этого необходимо:
      1. Зайти в панель управления blogger — Шаблон — Изменить HTML.
      2. Вставить между тегами head две библиотеки, которые описаны в уроке.

       

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *