—»     —»   Сеточные эффекты навигации на jQuery
  Раздел: Меню и Навигация   Комментариев: 1  

Сеточные эффекты навигации на jQuery



Сегодня мы хотим поделиться с вами интересными сетчатыми эффектами для навигационного меню, реализованными посредством jQuery. В наших примерах мы покажем вам 10 вариантов навигации посредством набора миниатюр, и рассмотрим возможности применения данного эффекта.

Изображения, использующиеся в демо, предоставлены Эндрю и Лили, их профайл на Behance можно посмотреть тут: http://www.behance.net/AndrewLili
Изображения распространяются по лицензионному соглашению Creative Commons Attribution-NonCommercial 3.0 Unported License.

Просмотрите примеры (вы также можете переходить по навигации в примерах):

01 Default (show/hide) – Стандарт (показать/скрыть)
02 Fade - Затемнение
03 Sequential fade – Продолжительное затемнение
04 Move/fade – Перемещение/затемнение
05 Sequential move/fade – Продолжительное перемещение/затемнение
06 Sequential move/fade reversed – Обратное продолжительное перемещение/затемнение
07 Resize (show/hide) – Масштабирование (показать/скрыть)
08 Disperse – Рассеивание
09 Rows move – Перемещение линий
10 Sequential move/fade (3 rows) – Продолжительное перемещение/затемнение (в три линии)

Вы можете использовать колесо мыши для навигации по миниатюрам.

HTML-структура, на которой основан скрипт – это просто список элементов и нескольких стрелок навигации, которые обёрнуты в контейнер с классом и id «tj_container».

Давайте посмотрим пример с применённым продолжительным перемещением/затемнением:

$('#tj_container').gridnav({
    rows    : 2,
    navL    : '#tj_prev',
    navR    : '#tj_next',
    type    : {
        mode        : 'sequpdown',
        speed        : 400,
        easing        : '',
        factor        : 50,
        reverse        : false
    }
});

Здесь могут быть использованы следующие параметры:

rows: число линий, которые отображаются в сетке
navL/navR: селектор для элементов навигации вперед-назад
mode: тип анимации; вы можете использовать def | fade | seqfade | updown | sequpdown | showhide | disperse | rows
speed: скорость анимации для fade, seqfade, updown, sequpdown, showhide, disperse, rows
easing: эффект упрощения для fade, seqfade, updown, sequpdown, showhide, disperse, rows
factor: задержка между анимацией каждого элемента для seqfade, sequpdown, а также число пикселей, на которое сместится линия
reverse: отображение элементов в обратном порядке при применении sequpdown.

Надеемся, что вам понравится данный эффект и вы найдете ему применение.

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

Ключевые тэги: jQuery
Опубликовал Mysterious Master   Прочитано (раз): 5896   |   Оставлено комментариев: 1
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 18 июля 2011 @ 08:32
Написал: Митрич — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
прикольно! winked
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


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


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Ноябрь 2017    »
ПнВтСрЧтПтСбВс
 12345
6789101112
13141516171819
20212223242526
27282930