Плавная прокрутка на всю страницу с помощью плагина jQuery viewScroller.js

Эффекты прокрутки JavaScript существуют уже много лет, и из них можно выбирать из десятков великолепных библиотек. Но новый соперник в этой области viewScroller.js,

Эта очень маленькая, но мощная библиотека может создавать одностраничные макеты, которые прокручиваются как блоки одним движением колеса прокрутки (или сенсорной панели). Это создает управляемый макет, где прокрутки перемещают пользователя по отдельным разделам страницы с точностью до пикселя.

Читайте также: JavaScript библиотеки для крутых эффектов прокрутки

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)

Естественно, это абсолютно бесплатная библиотека доступно на GitHub и легко установить с помощью Bower или NPM.

Тем не менее, viewScroller.js является не независимая библиотека JavaScript. Он опирается на jQuery и два специальных плагина: jQuery Mousewheel а также JQuery Easing, Они оба необходимы для правильной работы эффектов прокрутки.

Это может препятствовать значению viewScroller, поскольку для его работы требуется несколько библиотек JS. Но если вы уже используете jQuery, то это не просто. viewScroller.js предлагает самый простой метод, позволяющий запустить веб-приложение с прокруткой на одну страницу без большого количества кода.

Однако для создания эффекта прокрутки используются очень подробные классы и идентификаторы. Вы можете редактировать эти классы в своем собственном файле CSS или перезаписывать их в базовом коде. Вы найдете Полный список на странице репо с именами классов и данными по умолчанию.
Самый простой способ начать с клонирования демонстраций viewScroller. У них есть один с правой боковой панелью, другой с левой боковой панелью, и один с две боковые панели содержание сэндвича в середине.

Если у вас все в порядке с веб-приложением, работающим на jQuery, то ViewScroller – фантастическая бесплатная библиотека для использования. Для этого требуется немало зависимостей, но их не должно быть сложно настроить.

Взгляните на живое демо и посмотрим, что вы думаете. Если вам нравится UX и поведение прокрутки, следуйте инструкциям по установке на GitHub для начала.

Читайте также: 15 примеров прокрутки, выполненных прямо в дизайне сайтов