Круглое переворачивающееся слайдшоу

В данном уроке мы сделаем простое и эффектное круглое слайдшоу. Экспериментальная концепция заключается в изменении угла поворота круга в зависимости от точки, в которой происходит нажатие. Есть три возможных варианта для каждой стороны: верх, середина и низ. Например, при нажатии в верхней правой части изображения, круг переворачивается под соответствующим углом, открывая следующую картинку на обратной стороне.

В демонстрации используются иллюстрации Isaac Montemayor.

Структура слайд шоу выглядит следующим образом:

Код
<div id="fc-slideshow" class="fc-slideshow">
  <ul class="fc-slides">
  <li><img src="images/1.jpg" /><h3>Hot</h3></li>
  <li><img src="images/2.jpg" /><h3>Cold</h3></li>
  <li><img src="images/3.jpg" /><h3>Light</h3></li>
  <li><img src="images/4.jpg" /><h3>Dark</h3></li>
  <li><img src="images/5.jpg" /><h3>Soft</h3></li>
  <li><img src="images/6.jpg" /><h3>Hard</h3></li>
  <li><img src="images/7.jpg" /><h3>Smooth</h3></li>
  <li><img src="images/8.jpg" /><h3>Rough</h3></li>
  </ul>
</div>


И она будет трансформироваться в такую:

Код
<div id="fc-slideshow" class="fc-slideshow">
   
  <ul class="fc-slides">
  <!-- ... -->
  </ul>
   
  <nav>
  <div class="fc-left">
  <span></span>
  <span></span>
  <span></span>
  <i class="icon-arrow-left"></i>
  </div>
  <div class="fc-right">
  <span></span>
  <span></span>
  <span></span>
  <i class="icon-arrow-right"></i>
  </div>
  </nav>
   
  <div class="fc-flip">
  <div class="fc-front">
  <div><img src="images/4.jpg"><h3>Dark</h3></div>
  <div class="fc-overlay-light"></div>
  </div>
  <div class="fc-back">
  <div><img src="images/5.jpg"><h3>Soft</h3></div>
  <div class="fc-overlay-dark"></div>
  </div>
  </div>
   
</div>


Элемент навигации имеет несколько пустых элементов span, которые являются "датчиками". Каждая сторона круга имеет три обалсти, в которых воспринимается нажатие кнопки мыши: вверху, по середине, внизу. Элемент i служит как навигационная стрелка, которая меняет место в зависимости от наведения курсора мыши на соответствующий "датчик".

Элемент div для переворачивающего круга содержит специальную 3D структуру: он имеет лицевую и обратную стороны. Как только мы переходим к следующему или предыдущему пункту, то данная структура становится видна и вращает переворачивающийся контейнер так, что выводится обратная торона.

Покровной слой придает реалистичности, добавляя свет или тень. Мы анимируем прозрачность в зависимости от угла вращения.

Плагин вызывается просто:

Код
$( '#fc-slideshow' ).flipshow();


Используются следующие опции для плагина (указаны значения по умолчанию):

Код
// Опции
$.Flipshow.defaults = {
  // Скорость перехода (ms)
  speed : 700,
  // Функция перехода
  easing : 'cubic-bezier(.29,1.44,.86,1.06)'
};


Данный эксперимент полноценно работает тoлько в браузерах, поддерживающих трансформации CSS 3D, а в остальных будет осуществляться простая смена слайдов.

  • FalleN

  • 5647

  • 1

  • 226
Теги: jQuery, slidewhow, css3, 3D

Ссылки на статью:

Прямая ссылка:
HTML-код:
ББ-код:

Похожие статьи:

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

Для добавления вы должны авторизироваться!