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

26

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

Отже, плагін jQuery скролл по блоках, з яким ми сьогодні працюватимемо, називається Nice Screen. Отримати його можна за цим посиланням або ж просто візьміть з исходников.

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

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

  • About
  • Features
  • Spacial transitions

Ну і, власне, самі секції-блоки з потрібним вам вмістом:

About

Features

Spacial transitions

Зараз ми повинні побачити приблизно таку картину:

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

Залишилося ініціалізувати плагін, щоб отримати потрібний результат — скролл по блокам. Для цього достатньо викликати метод nicescreen() для секцій, ось так:

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

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

Тепер ми бачимо тільки першу секцію. Вміст іншій секції нам доступно після вибору потрібної в меню вище. Секції при цьому змінюються з красивим анімаційним ефектом. Ось, власне, і все. Наш плагін для скролла по блокам працює.