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

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

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

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

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

<link href="css/jquery-lvl99-nicescreen.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/jquery-lvl99-nicescreen.js"></script>

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

<nav>
 <ul>
  <li><a href="#screen-about">About</a></li>
  <li><a href="#screen-features">Features</a></li>
  <li><a href="#screen-spacial">Spacial transitions</a></li>
 </ul>
</nav>

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

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

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

Узнать подробнее
<section id="viewport" class="ui-nicescreen-viewport">
 <article id="screen-about" class="screen" data-nicescreen-column="0">
  <h2>About</h2>
  ...
 </article>

 <article id="screen-features" class="screen" data-nicescreen-column="1">
  <h2>Features</h2>
  ...
 </article>

 <article id="screen-spacial" class="screen" data-nicescreen-column="2">
 <h2>Spacial transitions</h2>
  ...
  </article>
</section>

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

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

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

$(function(){
 $('#viewport .screen').nicescreen();
});

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

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

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

Научиться

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree