Сегодня мы поделимся с вами идеей простого и забавного круглого слайдшоу. Это – экспериментальная концепция, в корне которой лежит идея «перекидывания» круга под определенным углом в зависимости от того, на какую точку круга производится щелчок. Для каждой стороны существует три возможности: верх, середина и низ. Например, при щелчке по верхней правой части изображения круг перевернется под сопутствующим углом, при этом будет казаться, что мы нажали на указанную часть и показалось следующее изображение, находящееся на обратной стороне круга.
Вот как выглядит структура:
<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>
У элемента nav есть несколько пустых участков, служащих в качестве “зон обнаружения”. У каждой стороны окружности имеется три области, на которые можно будет щелкать, одна вверху, одна посредине и одна внизу. Элемент i послужит в качестве навигационной стрелки-указателя и, в зависимости от того, над которым из участков проводим мышью, мы будем вращать маленький квадрат со стрелкой. Но мы не станем применять в качестве области щелчка стрелку, а возьмем весь участок.
Разделение для перекидывания круга содержит специальную 3D-структуру: у него есть передняя и задняя стороны. При переходе к следующему или предыдущему элементу мы покажем эту структуру и будем вращать контейнер так, чтобы было видно обратную сторону.
От применения наложений все смотрится более реалистичным по причине обеспечения эффекта света и тени. Мы анимируем непрозрачность в зависимости от угла вращения.
Просто вызываем плагин вроде этого:
$( '#fc-slideshow' ).flipshow();
А вот опции плагина:
// опции
$.Flipshow.defaults = {
// скорость перехода по умолчанию (в мс)
speed : 700,
// ослабление перехода по умолчанию
easing : 'cubic-bezier(.29,1.44,.86,1.06)'
};
Пожалуйста, помните, что это эксперимент, и работать как следует все будет в браузерах, поддерживающих 3d-трансформации CSS. Для остальных есть простая альтернатива, при которой предыдущий или следующий элемент показываются и скрываются.
Надеюсь, вас вдохновит этот маленький плагин!