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

Дата публикации: 2017-03-09

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

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

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

<link href="css/jquery-lvl99-nicescreen.css" rel="stylesheet">
<script src="//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>

<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>

<h2>About</h2>

...

</article>

<h2>Features</h2>

...

</article>

<h2>Spacial transitions</h2>

...

</article>

</section>

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

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

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

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

$(function(){

$('#viewport .screen').nicescreen();

});

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

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

Метки: jquery