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

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

В демонстрации используются иллюстрации 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)'
};

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


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/W9nN6coief0/lessons.php

Читать комменты и комментировать

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



Защитный код
Обновить

Круглое переворачивающееся слайдшоу | | 2013-02-02 02:40:28 | | Статьи Web-мастеру | | В данном уроке мы сделаем простое и эффектное круглое слайдшоу. Экспериментальная концепция заключается в изменении угла поворота круга в зависимости от точки, в которой происходит нажатие. Есть три | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: