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

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

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

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

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

 

Опции

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

// Опции
$.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.


Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/oja0jH6VFyo/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Плагин Windy для стремительной навигации | | 2012-10-17 23:54:35 | | Статьи Web-мастеру | | Windy - плагин jQuery, который позволяет осуществить стремительную навигацию по большому набору пунктов с помощью 3D переходов и трансформаций CSS. Например, можно создать эффект непрерывного потока | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: