—»     —»   Windy: плагин для быстрой навигации по контенту
  Раздел: Java-Скрипты, Меню и Навигация   Нет комментариев  

Windy: плагин для быстрой навигации по контенту



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

Windy: плагин для быстрой навигации по контенту

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

Для браузеров, которые не поддерживают CSS 3D transforms и transitions, предоставляется запасной вариант, то есть обычная навигация, состоящая из пунктов (появляется/исчезает).

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

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

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

* next()
* prev()
* navigate(position)

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

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

Ознакомьтесь с этими демо, где используются различные настройки:

Демо 1: стандартные границы с навигационными стрелками
Демо 2: расширенные границы с навигационными стрелками
Демо 3: суженные границы со слайдером из jQuery UI

Посмотреть демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.

Новость отредактировал Design FactoRy - 11 июля 2017, 20:06
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery, CSS
Опубликовал Design FactoRy   Прочитано (раз): 4103   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц January по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930