Як створити кругле слайдшоу

Від автора: У цьому уроці ми створимо, просте кругле слайдшоу, де для навігації потрібно перевертати зображення.

Сьогодні ми поділимося з вами ідеєю створення безкоштовного слайдшоу, яке повинно бути простим, круглим і забавним. Це – експериментальна концепція, в основі якої лежить ідея «перекидання» кола під певним кутом, залежно від того, на яку точку кола проводиться клацання. Для кожної сторони існує три можливості: верх, середина і низ. Наприклад, при клацанні по верхній правій частині зображення коло перевернеться під відповідним кутом, при цьому буде здаватися, що ми натиснули на вказану частину і здалося наступне зображення, що знаходиться на зворотному боці кола.

Демоверсія показує ілюстрації Ісаака Монтемайора (Isaac Montemayor). Його роботи можна подивитися на Dribbble або його вебсайті.

От як виглядає структура:

А ми перетворимо її наступним чином:

У елемента nav є декілька порожніх ділянок, що служать в якості «зон виявлення». У кожної сторони колу є три області, на які можна буде клацати, одна вгорі, одна посередині і одна внизу. Елемент i послужить як навігаційної стрілки-покажчика і, в залежності від того, над яким ділянок проводимо мишею, ми будемо обертати маленький квадрат зі стрілкою. Але ми не станемо застосовувати в якості області клацання стрілку, а візьмемо всю ділянку.

Поділ для перекидання кола містить спеціальну 3D-структуру: у нього є передня і задня сторони. При переході до наступного або попереднього елемента ми покажемо цю структуру і будемо обертати контейнер так, щоб було видно зворотний бік.

Від застосування накладень все виглядає більш реалістичним через забезпечення ефекту світла і тіні. Ми анимируем непрозорість в залежності від кута обертання.

Просто викликаємо плагін зразок цього:

$( ‘#fc-slideshow’ ).flipshow();

А ось опції плагіна:

// опції
$.Flipshow.defaults = {
// швидкість переходу за замовчуванням (в мс)
speed : 700,
// ослаблення переходу за замовчуванням
easing : ‘cubic-bezier(.29,1.44,.86,1.06)’
};

Будь ласка, пам’ятайте, що це експеримент, і працювати як слід все буде в браузерах, що підтримують 3d-трансформації CSS. Для інших є проста альтернатива, при якій попередній або наступний елемент показуються і ховаються.

На цьому урок зі створення слайдшоу закінчено. Сподіваюся, надихне вас цей маленький плагін!