Авторизация







Регистрация / Забыли пароль?

Регистрация нового пользователя











< Назад

Восстановление пароля





< Назад

Добро пожаловать

Выход


Ежедневное обновление статей и уроков, будь в курсе, держи руку на пульсе событий!

Главная >> jQuery

Зеркально перелистывающееся кольцевое слайд-шоу


Простейшее кольцевое слайд – шоу, листая которое, изображения будут зеркально сменяться. Звучит оригинально? Тогда вперед!


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

    Изображения для демонстрационных примеров, нам предоставил Isaac Montemayor. Увидеть все его работы, вы можете здесь.

    HTML

    А вот и необходимая 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, останутся пустыми, и будут служить нам «зонами обнаружения мыши». Каждая сторона круга, будет иметь по 3 таких области, которые будут интерактивными и располагаться сверху, в середине и снизу. В них будут появляться изображения навигационных стрелок, в зависимости от выбранного span. 

    По кругу, будет находиться специальная 3D структура для пролистывания, она будет иметь переднюю и заднюю стороны. Как только мы переместимся к следующему или предыдущему элементу, с её помощью мы увидим обратную сторону.

    Следующее что нам необходимо, это создать наложения, чтобы всё выглядело немного более реалистичным, путём наложения света и тени. Мы будем анимировать их прозрачность в зависимости от угла поворота.

    JavaScript

    Инициализация плагина происходит всего в одну строку:

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

А вот и некоторые настройки:

// настройки
$.Flipshow.defaults = {
    // время перехода (миллисекунды)
    speed : 700,
    // стиль перехода
    easing : 'cubic-bezier(.29,1.44,.86,1.06)'
};

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

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

    Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


Дата публикации: 08.03.2013
Опубликовал: Сергей Кашурин
Просмотров: 472
Правила перепечатки

Правила перепечатки

Уважаемый посетитель сайта!
Ниже преведены условия использования и перепечатки материалов сайта /
Все материалы данного сайта подготовлены для Вас лично мной.

Большая часть материалов сайта - это авторские уроки, остальные, это переводы уроков с английского языка на русский.
Если Вы решили использовать материалы данного сайта где-то на своих ресурсах или в рассылке, то соблюдайте следующие требования:
1. Урок или статья должны перепечатываться «как есть» с сохранением всех ссылок на источник урока, а если это перевод, то и на сайт, авторы которого подготовили его.
2. Ссылки на сайт источника и переводчика обязательно должны быть работоспособными (при нажатии по ссылке человек должен перейти на сайт автора/переводчика). Если Вы перепечатали какой-либо документ, обязательно проверьте ссылку на работоспособность.
3. Искажение информации об авторе, источнике, переводчике при перепечатке материалов запрещено!
4. Содержание урока или статьи при перепечатке не должно подвергаться модификациям и переделке. Все уроки и статьи, размещенные на сайте, должны перепечатываться как есть. Вы не имеете права урезать, исправлять или иным образом коверкать републикуемый документ.
С уважением, Сергей Кашурин– владелец сайта /


25 поразительных анимаций CSS3, которые улучшат внешний вид вашего сайта
CSS3, сокращение от английского Cascading Style Sheets 3, третье поколение таблиц стилей, которые используются для визуального представления сайта, при минимальном размере кода. Этот последний многообещающий набор стандартов, состоит из большого числа функций и инструментов, которые позволяют улучшить и контролировать дизайн и увеличивать скорость загрузки сайта.
23 jQuery плагина для организации слайд-шоу и галерей на сайте
Дорогие Друзья! Сегодня, я хочу познакомить вас с подборкой замечательных jQuery плагинов для создания слайд-шоу и галерей. Все они являются бесплатными и очень просты в установке и настройке.
100 бесплатных PSD элементов для веб-дизайна и мобильных устройств.
Всем привет! Давайте сегодняшний день сделаем исключением, и вместо урока, посмотрим очень классные PSD заготовки для веб-сайтов и мобильных приложений которые вы сможете бесплатно скачать!

Уроки и статьи

«Найден Самый Дешевый и Эффективный Способ Рекламы в Интернете!»

Доказанo: ведение своей почтовой рассылки - это самый действенный и дешевый метод рекламы в Интернете.

Используете ли Вы его?

Если нет, то Вы давно теряете свои деньги! Если да, то пришло время вести Вашу почтовую рассылку на самом эффективном инструменте в Рунете - сервисе рассылок SmartResponder.ru

Узнать об этом подробнее >>

Быть в курсе всех событий: