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

1 ответ(ов) в теме
moto
На сайте с 12.03.2017
Администратор
Тем 3410
Сообщения 13603
0
18:30

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

Демо: ссылка

Исходники: здесь

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

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

И она будет трансформироваться в такую:
<div id="fc-slideshow" class="fc-slideshow"><br> <br> <ul class="fc-slides"><br> <!-- ... --><br> </ul><br> <br> <nav><br> <div class="fc-left"><br> <span></span><br> <span></span><br> <span></span><br> <i class="icon-arrow-left"></i><br> </div><br> <div class="fc-right"><br> <span></span><br> <span></span><br> <span></span><br> <i class="icon-arrow-right"></i><br> </div><br> </nav><br> <br> <div class="fc-flip"><br> <div class="fc-front"><br> <div><img src="images/4.jpg"><h3>Dark</h3></div><br> <div class="fc-overlay-light"></div><br> </div><br> <div class="fc-back"><br> <div><img src="images/5.jpg"><h3>Soft</h3></div><br> <div class="fc-overlay-dark"></div><br> </div><br> </div><br> <br></div>

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

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

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

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

$( '#fc-slideshow' ).flipshow();

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

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

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

источник

Редакции сообщения
0

Ваше имя *

Ваш E-mail *

не публикуется

Текст сообщения *