Від автора: У цьому уроці ми створимо, просте кругле слайдшоу, де для навігації потрібно перевертати зображення.
Сьогодні ми поділимося з вами ідеєю створення безкоштовного слайдшоу, яке повинно бути простим, круглим і забавним. Це – експериментальна концепція, в основі якої лежить ідея «перекидання» кола під певним кутом, залежно від того, на яку точку кола проводиться клацання. Для кожної сторони існує три можливості: верх, середина і низ. Наприклад, при клацанні по верхній правій частині зображення коло перевернеться під відповідним кутом, при цьому буде здаватися, що ми натиснули на вказану частину і здалося наступне зображення, що знаходиться на зворотному боці кола.
Демоверсія показує ілюстрації Ісаака Монтемайора (Isaac Montemayor). Його роботи можна подивитися на Dribbble або його вебсайті.
От як виглядає структура:
-
Hot
-
Cold
-
Light
-
Dark
-
Soft
-
Hard
-
Smooth
-
Rough
А ми перетворимо її наступним чином:
Dark
Soft
У елемента nav є декілька порожніх ділянок, що служать в якості «зон виявлення». У кожної сторони колу є три області, на які можна буде клацати, одна вгорі, одна посередині і одна внизу. Елемент i послужить як навігаційної стрілки-покажчика і, в залежності від того, над яким ділянок проводимо мишею, ми будемо обертати маленький квадрат зі стрілкою. Але ми не станемо застосовувати в якості області клацання стрілку, а візьмемо всю ділянку.
Поділ для перекидання кола містить спеціальну 3D-структуру: у нього є передня і задня сторони. При переході до наступного або попереднього елемента ми покажемо цю структуру і будемо обертати контейнер так, щоб було видно зворотний бік.
Від застосування накладень все виглядає більш реалістичним через забезпечення ефекту світла і тіні. Ми анимируем непрозорість в залежності від кута обертання.
Просто викликаємо плагін зразок цього:
$( ‘#fc-slideshow’ ).flipshow();
А ось опції плагіна:
// опції
$.Flipshow.defaults = {
// швидкість переходу за замовчуванням (в мс)
speed : 700,
// ослаблення переходу за замовчуванням
easing : ‘cubic-bezier(.29,1.44,.86,1.06)’
};
Будь ласка, пам’ятайте, що це експеримент, і працювати як слід все буде в браузерах, що підтримують 3d-трансформації CSS. Для інших є проста альтернатива, при якій попередній або наступний елемент показуються і ховаються.
На цьому урок зі створення слайдшоу закінчено. Сподіваюся, надихне вас цей маленький плагін!
