WINDY: Плагин постраничной навигации jQuery

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

Сложность

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

Для браузеров, которые не поддерживают CSS 3D transforms rotate или CSS transitions, будет простая нейтрализация, т.е. нормальная jQuery навигация элементов.

Для того, чтобы использовать плагин, нужно добавить простой неупорядоченный список с классом 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)

CSS transitions и основные стили находятся в файле windy.css.

Посмотрите на эти три демонстрационных примера с различными конфигурациями плагина:

ДЕМО СКАЧАТЬ Перевод статьи Windy: A Plugin for Swift Content Navigation

 

Тэги: menuplugin

Вход

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