Топ плагинов jQuery. Плагин для скролла по секциям

Топ плагинов jQuery. Плагин для скролла по секциям

От автора: приветствую вас, друзья. Позвольте представить вам очередной плагин из must have. Сегодня мы познакомимся с плагином, который может вам пригодиться при работе контентом, разбитым на секции. Данный плагин является определенным аналогом плагинов jQuery для организации вкладок (табов) и организует скролл по блокам.

Итак, плагин jQuery скролл по блокам, с которым мы сегодня будем работать, называется Nice Screen. Получить его можно по данной ссылке или же просто возьмите из исходников.

Возьмем из архива два файла — стили и скрипты плагина и подключим их к нашей странице:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

Ну и, собственно, сами секции-блоки с нужным вам содержимым:

Сейчас мы должны увидеть примерно такую картину:

Топ плагинов jQuery. Плагин для скролла по секциям

Осталось инициализировать плагин, чтобы получить нужный результат — скролл по блокам. Для этого достаточно вызвать метод nicescreen() для секций, вот так:

Топ плагинов jQuery. Плагин для скролла по секциям

Теперь мы видим только первую секцию. Содержимое другой секции нам доступно после выбора нужной в меню выше. Секции при этом сменяются с красивым анимационным эффектом. Вот, собственно, и все. Наш плагин для скролла по блокам работает.

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree