Windy - плагин для быстрой навигации по содержанию

Идея плагина навеяна следующим примером: CSS shaders Flipbook video by Adobe.

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

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

<ul id="wi-el" class="wi-container">
    <li>
        <img src="images/demo1/1.jpg" alt="image1"/>
        <h4>Заголовок</h4>
        <p>Описание</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 slider.

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