Lecaw

Учимся создавать Web-сайты

Как создать круговое слайдшоу на jQuery

January 28, 2013 270hits

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

ДЕМО Исходные файлы

 

В демо мы использовали изображения от Isaac Montemayor. Вы можете посмотреть его работы на Dribbble или этом сайте.

Начнем с HTML разметки:

<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 = {
    // скорость перехода пол умолчанию (ms)
    speed : 700,
    // упрощение перехода по умолчанию
    easing : 'cubic-bezier(.29,1.44,.86,1.06)'
};

Обратите внимание что это экспериментальный элемент и он будет работать только в предназначенных браузерах, которые поддерживают CSS3 transforms. Для других есть простая нейтрализация, которая просто показывает/скрывает элементы.

ДЕМО Исходные файлы

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(0 голосов)

Оставить комментарий