Плагин Windy для стремительной навигации

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

Доступны несколько опций, включая определение диапазона "разбрасываемых" пунктов, скорость, формирование пользовательской навигации и так далее.

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

Разметка


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

Code
<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>


Плагин вызывается просто:

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


Опции


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

Code
// Опции
$.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(позиция)

На третьей демонстрационной странице показано использование слайдера jQuery UI в качестве навигационного элемента.

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

  • FalleN

  • 1960

  • 1

  • 210

Ссылки на статью:

Похожие статьи: