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

14

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

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

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

Демоверсія показує ілюстрації Ісаака Монтемайора (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. Для інших є проста альтернатива, при якій попередній або наступний елемент показуються і ховаються.

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