Lecaw

Учимся создавать Web-сайты

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

October 9, 2012 717hits

WINDY - jQuery плагин, который позволяет построить быструю jQuery навигацию через груду элементов, используя CSS 3D transforms и transitions. Эффект непрерывного потока jQuery навигации напоминает о колоде карт или пачке листов, отсюда его имя. Эта идея вдохновлена примерами программ построения CSS теней, как показано в Introducing CSS shaders: Cinematic effects for the web.

Исходные файлы ДЕМО

 

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

Для браузеров, которые не поддерживают CSS 3D transforms или 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>

Вызов плагина jQuery навигации:

$( '#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 }
    }
};

Границы определяют значения для "рассеивания" или "отлета" элементов. Плагин jQUery навигации в произвольном порядке выберет значение между обозначенными пределами.

Любите работать в саду, но иногда Вам сложно справиться с большими физическими нагрузками? Тогда нужно заглянуть в наш магазин садовой техники, где представлена незаменимая садовая техника для дачи!

Доступны следующие открытые методы, чтобы использовать в сочетании с элементами навигации:

  • next()
  • prev()
  • navigate(position)

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

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

 

Исходные файлы ДЕМО

 

Дополнительная информация

Влерий Аликин - веб-разработчик & дизайнер. Соучредитель и член команды Lecaw.

Эл. почта
RATTING:
(1 Голосовать)

Оставить комментарий