Windy - это jQuery-плагин, который позволяет быстро перемещаться по множеству пунктов меню, используя CSS 3D-трансформацию и переходы. Эффект напоминает разлетающуюся колоду игральных карт или летящую листву, отсюда и название.
Идея плагина навеяна следующим примером: 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.
Источник© 2008 - 2024 Все права защищены
Новый комментарий