Плагин Windy для стремительной навигации. - Скрипты для UCOZ и не только... - - Каталог файлов - Bestarchive-soft, music, movies, books, scripts, photos

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

bestarchive_demo

Нажмите

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

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

Разметка

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