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

Перекидное круглое слайдшоу

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

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

скачать исходникидемо

Демоверсия показывает иллюстрации Исаака Монтемайора (Isaac Montemayor). Его работы можно посмотреть на Dribbble или его вебсайте.

Вот как выглядит структура:

<div id="fc-slideshow" class="fc-slideshow">
    <ul class="fc-slides">
        <li><h3>Hot</h3></li>
        <li><h3>Cold</h3></li>
        <li><h3>Light</h3></li>
        <li><h3>Dark</h3></li>
        <li><h3>Soft</h3></li>
        <li><h3>Hard</h3></li>
        <li><h3>Smooth</h3></li>
        <li><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><h3>Dark</h3></div>
            <div class="fc-overlay-light"></div>
        </div>
        <div class="fc-back">
            <div><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. Для остальных есть простая альтернатива, при которой предыдущий или следующий элемент показываются и скрываются.

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

Автор: Mary Lou

Источник: http://tympanus.net/

Редакция: Команда webformyself.

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (3)

  1. Людмила

    Хотела посмотреть демо, но почему то не работает, картинка на демо сайте не реагирует на клики.

    • Андрей Кудлай

      Странно… у меня в Firefox и Chrome работает так, как и положено. В Опере и IE просто слайдер.

  2. Максим

    Chrome Версия 25.0.1364.152 m (говорит, что последняя) — демо не работает

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree