Google tips - красиві записки з анімацією для вашого сайту

Можливо ви пам`ятаєте урок, в якому ми створювали записки за допомогою CSS3. Записки в тому уроці були схожі на записки які можна побачити на Windows 7. Якщо ви не бачили і пропустили минулий урок, тоді ви зможете знайти посилання на нього в повній записи. А в цьому уроці ми створимо записки, які використовує Google. Привабливі записки з красивою анімацією при розкритті записки. Також в прикладах є 5 демо з різними настройками, тому ви можете вибрати той, який найбільше вам підходить.

Відео: 25+ Tips and Tricks for Google Nexus 6P

Урок, в якому ми створювали записки за допомогою CSS3 - Створення ефекту записки за допомогою CSS3

Приклади записок можна побачити тут:

Подивитися прімерСкачать

Як користуватися?

HTML частина

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

Відео: 25+ Tips and Tricks for Google Pixel and Pixel XL

lt;script type="Text / javascript" src="Http://code.jquery.com/jquery-1.9.1.js"gt; lt;/scriptgt;lt;script type="Text / javascript" src="Js / jquery.tip_cards.js"gt; lt;/scriptgt;lt;link rel="Stylesheet" type="Text / css" href="Css / tip_cards.css" /gt;

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

123456789101112131415

lt;bodygt; ..lt;ul class="Tips"gt;lt;ligt;lt;div class="Tc_front"gt;lt;a href="# Tip1"gt; ...lt;/agt;lt;/divgt;lt;div class="Tc_back"gt; ...lt;/divgt;lt;div id="Tip1" class="Tip"gt;lt;div class="Tc_front"gt; ...lt;/divgt;lt;div class="Tc_back"gt; ...lt;/divgt;lt;/divgt;lt;/ligt; ..lt;/bodygt;

І як бачите тут є дві сторони. А ось якщо вам потрібна лише одна сторона і немає необхідності в обертанні, тоді вам потрібен наступний код:

1234567891011

lt;bodygt; ..lt;ul class="Tips"gt;lt;ligt;lt;a href="# Tip1"gt; ...lt;/agt;lt;div id="Tip1" class="Tip"gt; ...lt;/divgt;lt;/ligt; ..lt;/bodygt;

jQuery частина

Після того як з розміткою закінчено необхідно написати невелике код на javascript. Плагін сам визначить який тип записок вам потрібен, а вам лише потрібно задати інші настройки:

1234567891011121314

$(".tips").tip_cards({entrance: "Bottom",column: 4,margin: "1%",selector: "Gt; li",hoverTilt: "Right",triggerSelector: "Gt; 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 - це селектор, за яким визначається все інше вміст записки. Звичайно, ви можете змінювати структуру списку, і тоді необхідно буде вказати свій селектор. За замовчуванням це «gt; li ».
hoverTilt - визначає в який бік повертати записку при наведенні. Може приймати значення «right», «left», «up», і «down». За замовчуванням «right».
triggerSelector - в цьому плагіні ви також можете визначати свій перемикач, а також той перемикач, який з`являється у спливаючому вікні. За замовчуванням використовується посилання, яка знаходиться в списку.
cardFlyDirection - це властивість дозволяє задати напрямок в якому з`являється спливаюче вікно. Може приймати наступні значення «all», «top», «bottom», «left», і «right».
closeButton - за допомогою даного властивості можна визначити текст для кнопки закриття вікна. А також можна задати значення false і тоді буде використаний текст «X».
flipButton - на відміну від минулого властивість, за допомогою даного можна визначити текст для кнопки повороту. А також можна задати значення false і тоді буде використаний текст «Повернути».
navigation - використовувати або не використовувати навігацію для перегляду записок одну за одною.
beforeOpen - функція, яка буде викликана до виклику спливаючого вікна. Її потрібно писати в такий спосіб:
12345
$(".tips").tip_cards({beforeOpen: function () {...}})-
beforeOpen - функція, яка буде викликана після виклику спливаючого вікна. Її потрібно писати в такий спосіб:
12345
$(".tips").tip_cards({afterOpen: function () {...}})-