Windy: плагин для быстрой навигации по контенту

Windy – это jQuery-плагин, который позволяет вам быстро переключаться между слоями данных при помощи CSS 3D transforms и transitions. Эффект бесконечной навигации напоминает момент, когда колода карт одна за одной вылетают из ладони фокусника.


Здесь есть несколько доступных опций, включая даже определения области распространения элементов при навигации, определения скорости (CSS transitions), добавления пользовательской навигации и так далее.

Для браузеров, которые не поддерживают CSS 3D transforms и transitions, предоставляется запасной вариант, то есть обычная навигация, состоящая из пунктов (появляется/исчезает).

Для того чтобы использовать этот плагин, вам потребуется неупорядоченный список с классом wi-container:

<ul id="wi-el" class="wi-container">
    <li>
        <img src="images/demo1/1.jpg" alt="image1"/>
        <h4>Coco Loko</h4>
        <p>Total bicycle rights in blog four loko raw denim ex, helvetica sapiente odio placeat.</p>
    </li>
    <li> <!-- ... --> </li>
    <li> <!-- ... --> </li>
    <li> <!-- ... --> </li>
    <!-- ... -->
</ul>

Плагин можно запускать следующим образом:

$( '#wi-el' ).windy();

Опции

Доступны следующие опции:

$.Windy.defaults = {
// если нам нужно указать селектор, который запускает функцию next(). Например: '#wi-nav-next'.
    nextEl : '',
// если нам нужно указать селектор, который запускает функцию prev().
    prevEl : '',
// вращение и преобразование границ для перемещения объектов.
    boundaries : {
        rotateX : { min : 40 , max : 90 },
        rotateY : { min : -15 , max : 15 },
        rotateZ : { min : -10 , max : 10 },
        translateX : { min : -200 , max : 200 },
        translateY : { min : -400 , max : -200 },
        translateZ : { min : 250 , max : 550 }
    }
};

Границы определяют значения для рассеивания или «вылета» объектов. Плагин будет случайным образом выбирать значение между указанными значениями.

Следующие общие методы доступны для использования в комбинации с элементами навигации:

* next()
* prev()
* navigate(position)

Если вам хотелось бы увидеть больше примеров использования элементов навигации, то просмотрите демо, где используются стрелки и слайдер из jQuery UI.

CSS-анимация и основное оформление определены в файле windy.css.

Ознакомьтесь с этими демо, где используются различные настройки:

Демо 1: стандартные границы с навигационными стрелками
Демо 2: расширенные границы с навигационными стрелками
Демо 3: суженные границы со слайдером из jQuery UI

Посмотреть демо | Скачать исходный код