Представляю огромный список плагинов прокрутки на jQuery для вашего сайта.  Различные трюки с прокруткой пришли к нам из-за рубежа не так давно и оцепили ряд современных порталов и сайтов, которые хотели выделиться. Работа над вертикальной прокруткой вполне может повысить конверсию и несомненно впечатление пользователя. Благодаря интересным подходам JS + CSS3 Вы можете улучшить интерфейс своего сайта. Если добавить немного фантазии, то можно из любого плагина получить что-то уникальное для своего сайта. Ведь каждый сайт старается выделиться из серой массы разными способами. Благодаря прокрутке, можно некоторые страницы перенести на страницу, с реализованным плагином, что улучшит получение важной информации пользователем. Данная технология лучше всего подойдет для различных портфолио или же демонстрации какого-либо продукта и т.д.

Переходим непосредственно к делу.

к содержанию ↑

Sly

Sly - это библиотека JavaScript для расширенной однонаправленной прокрутки с поддержкой навигации по элементам

Sly — это библиотека JavaScript для расширенной однонаправленной прокрутки с поддержкой навигации по элементам. Его можно использовать как простую замену прокрутки, так и инструмент навигации, или как отличный интерфейс навигации и анимации для сайтов параллакса.

к содержанию ↑

jQuery Scroll Path

плагин для определения пользовательских путей прокрутки.

Это плагин для определения пользовательских путей прокрутки.

к содержанию ↑

windows

Удобный, слабо связанный плагин jQuery для полноэкранных прокручивающих окон.

Удобный, слабо связанный плагин jQuery для полноэкранных прокручивающих окон.

к содержанию ↑

AnimateScroll

AnimateScroll - это плагин jQuery, который позволяет вам прокручивать на любую часть страницы

AnimateScroll — это плагин jQuery, который позволяет вам прокручивать на любую часть страницы, просто вызывая функцию animatescroll () с идентификатором или классом элемента, на который вы хотите перейти.

к содержанию ↑

ScrollMe

По мере прокрутки страницы ScrollMe может масштабировать, поворачивать, переводить и изменять прозрачность

По мере прокрутки страницы ScrollMe может масштабировать, поворачивать, переводить и изменять прозрачность элементов на странице. Его легко настроить, и не требуется ни одна строка javascript.

к содержанию ↑

stickUp

Простой плагин, который «прикрепляет» элемент к верхней части окна браузера, прокручивая его, всегда сохраняя его в поле зрения

Простой плагин, который «прикрепляет» элемент к верхней части окна браузера, прокручивая его, всегда сохраняя его в поле зрения. Этот плагин работает на многостраничных сайтах, но имеет дополнительные возможности для макетов с одним пейджером.

к содержанию ↑

Block Scroll

Block Scroll - это плагин jQuery, который превращает набор элементов в блоки

Block Scroll — это плагин jQuery, который превращает набор элементов в блоки и отображает их по одному экрану за раз. Идея состоит в том, чтобы разбить вашу страницу на куски для лучшего представления и потока пользователей. Блокировка прокрутки автоматически изменяет вашу страницу.

к содержанию ↑

Starscroll

Создайте div в качестве фона ... активируйте плагин; анимация при прокрутке.

Создайте div в качестве фона … активируйте плагин; анимация при прокрутке. Плагин автоматически установит div, чтобы он работал невидимым.

к содержанию ↑

Scrolldeck

Плагин jQuery для создания прокручивающих презентационных колод

Плагин jQuery для создания прокручивающих презентационных колод

к содержанию ↑

Scrollocue

Scrollocue - это плагин jQuery для создания простой системы

Scrollocue — это плагин jQuery для создания простой системы autocue / teleprompter для прокрутки строк текста.

к содержанию ↑

scrollorama

Плагин jQuery для создания классных прокручиваемых материалов.

Плагин jQuery для создания классных прокручиваемых материалов.

к содержанию ↑

Stellar.js

Stellar.js - это плагин jQuery, который обеспечивает эффекты прокрутки параллакса для любого элемента прокрутки.

Stellar.js — это плагин jQuery, который обеспечивает эффекты прокрутки параллакса для любого элемента прокрутки.

к содержанию ↑

Super scroll orama

Плагин jQuery для анимации прокрутки supercool.

Плагин jQuery для анимации прокрутки supercool.

к содержанию ↑

Parallax

Экспериментальный легкий JS-скрипт для облегчения быстрой анимации на основе прокрутки.

Экспериментальный легкий JS-скрипт для облегчения быстрой анимации на основе прокрутки.

к содержанию ↑

Responsive 3d Fold Scroll

Отзывчивая анимация 3D Fold на прокрутке плагина jQuery.

Отзывчивая анимация 3D Fold на прокрутке плагина jQuery.

к содержанию ↑

jQuery Scrollify

Плагин jQuery, который помогает прокручивать и привязывать к разделам

Плагин jQuery, который помогает прокручивать и привязывать к разделам. Совместим с Touch.

к содержанию ↑

vivus.js

Vivus - это легкий класс JavaScript (без зависимостей)

Vivus — это легкий класс JavaScript (без зависимостей), который позволяет вам анимировать SVG, давая им возможность рисования.

к содержанию ↑

jQuery slimScroll

slimScroll - небольшой (4.6KB) плагин jQuery

slimScroll — небольшой (4.6KB) плагин jQuery, который преобразует любой div в прокручиваемую область с красивой полосой прокрутки.

к содержанию ↑

jQRangeSlider

Мощный слайдер для выбора диапазонов значений, поддержка дат и многое другое.

Мощный слайдер для выбора диапазонов значений, поддержка дат и многое другое.

к содержанию ↑

jQuery.pin

Вы когда-нибудь хотели прикрепить что-то к стороне текста

Вы когда-нибудь хотели прикрепить что-то к стороне текста? Вам когда-нибудь был нужен тонкий липкий элемент, который бы спокойно был закреплен, пока вы прокручиваете вниз?

jQuery.Pin здесь, чтобы помочь! Вставьте любой элемент в верхнюю часть контейнера. Легко отключите его для меньших размеров экрана, где нет места для такого рода махинаций.

к содержанию ↑

Infinite AJAX Scroll

Оптимизированный для SEO бесконечный плагин прокрутки для jQuery.

Оптимизированный для SEO бесконечный плагин прокрутки для jQuery.

к содержанию ↑

Overscroll

Overscroll - это плагин jQuery и polyfill для стиля прокрутки Safari mobile

Overscroll — это плагин jQuery и polyfill для стиля прокрутки Safari mobile. Он предназначен для использования в настольных браузерах с последней версией jQuery.

к содержанию ↑

jQuery.localScroll

Упрощенная якорная анимация.

Упрощенная якорная анимация.

к содержанию ↑

Parallax ImageScroll – jQuery plugin

JQuery и совместимый с amd плагин для создания эффекта параллакса

JQuery и совместимый с amd плагин для создания эффекта параллакса, как показано на сайте spotify.com.

к содержанию ↑

fullPage.js

Легкий и простой в использовании плагин для создания полноэкранных прокручивающихся веб-сайтов

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

к содержанию ↑

Parallax.js

Библиотека для Javascript, которая позволяет легко параллаксировать страницы.

Библиотека для Javascript, которая позволяет легко параллаксировать страницы.

к содержанию ↑

Jarallax

Jarallax - это библиотека JavaScript с открытым исходным кодом

Jarallax — это библиотека JavaScript с открытым исходным кодом, которая упрощает настройку css на основе взаимодействия. С Jarallax легко создать веб-сайт с прокруткой параллаксом

к содержанию ↑

jInvertScroll

Это легкий плагин для jQuery, который позволяет вам перемещаться по горизонтали с эффектом параллакса при прокрутке вниз.

Это легкий плагин для jQuery, который позволяет вам перемещаться по горизонтали с эффектом параллакса при прокрутке вниз.

к содержанию ↑

Jquery fullContent.js

JQuery Full Content позволяет полностью создавать веб-сайты.

JQuery Full Content позволяет полностью создавать веб-сайты.

к содержанию ↑

jQuery One Page Scroll

Создайте веб-сайт со скроллингом на одной странице

Создайте веб-сайт со скроллингом на одной странице (веб-сайт iPhone 5S) с плагином прокрутки одной страницы.

к содержанию ↑

jQuery Parallax Plugin

jQuery Parallax - это сценарий, который имитирует эффект параллакса

jQuery Parallax — это сценарий, который имитирует эффект параллакса, как показано на nikebetterworld.com.

к содержанию ↑

jquery.parallax.js

Плагин parallax jQuery.

Плагин parallax jQuery.

к содержанию ↑

jquery.arbitrary-anchor.js

Произвольные привязки для любого элемента на вашей странице, используя небольшую магию jQuery.

Произвольные привязки для любого элемента на вашей странице, используя небольшую магию jQuery.

к содержанию ↑

Portfoliojs

Portfoliojs - это легкий плагин галереи jQuery для ваших красивых изображений

Portfoliojs — это легкий плагин галереи jQuery для ваших красивых изображений с горизонтальной прокруткой, который поддерживает настольные, планшетные и мобильные браузеры.

к содержанию ↑

Scrolling Parallax Plugin

Scrolling Parallax - новый плагин jQuery, который связывает эффект параллакса с полосами прокрутки и колесиком мыши

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

к содержанию ↑

Scrolltab

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

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

к содержанию ↑

Scrolly

Супер легкий и простой в использовании плагин parallax для jQuery.

Супер легкий и простой в использовании плагин parallax для jQuery.

к содержанию ↑

skrollr

Отдельная библиотека прокрутки параллакса для мобильных устройств

Отдельная библиотека прокрутки параллакса для мобильных устройств (Android + iOS) и пк. Нет jQuery. Просто обычный JavaScript (и некоторая магия).

к содержанию ↑

SMINT

Smint - это простой плагин jQuery, который помогает при навигации на веб-сайтах с одной страницей.

Smint — это простой плагин jQuery, который помогает при навигации на веб-сайтах с одной страницей.

к содержанию ↑

jQuery custom content scroller

Детально настраиваемый пользовательский плагин jQuery для прокрутки

Детально настраиваемый пользовательский плагин jQuery для прокрутки. Особенности включают в себя вертикальную и / или горизонтальную полосу прокрутки, настраиваемый импульс прокрутки, колесо мыши (через плагин jQuery mousewheel), поддержку клавиатуры и сенсорного экрана, готовые к использованию темы и настройку с помощью CSS, поддержку направления RTL, параметры опций для полного управление функциями прокрутки, методы запуска таких действий, как прокрутка, обновление, уничтожение и т. д.

к содержанию ↑

ScrollUpBar Plugin

Плагин прокрутки вверх (jQuery) скрывает верхнюю панель при прокрутке вниз и показывает ее при прокрутке вверх

Плагин прокрутки вверх (jQuery) скрывает верхнюю панель при прокрутке вниз и показывает ее при прокрутке вверх. Это особенно полезно на мобильных интерфейсах, чтобы сэкономить драгоценное пространство.

к содержанию ↑

StickyTableHeaders

Плагин jQuery, который делает большие таблицы более удобными, если заголовок таблицы будет прикреплен к верхней части экрана при прокрутке.

Плагин jQuery, который делает большие таблицы более удобными, если заголовок таблицы будет прикреплен к верхней части экрана при прокрутке.

к содержанию ↑

jQuery panelSnap

Плагин jQuery, который обеспечивает функциональность привязки к набору панелей в вашем интерфейсе.

Плагин jQuery, который обеспечивает функциональность привязки к набору панелей в вашем интерфейсе.

к содержанию ↑

isInViewport.js

Сверхлегкий плагин jQuery, который сообщает вам, есть ли элемент в окне просмотра с завихрением.

Сверхлегкий плагин jQuery, который сообщает вам, есть ли элемент в окне просмотра с завихрением.

к содержанию ↑

Waterfall

Плагин jquery waterfall, такой как Pinterest

Плагин jquery waterfall, такой как Pinterest, huaban.com, faxianla.com

к содержанию ↑

Scroller

Плагин jQuery для замены в браузерах прокрутки по умолчанию.

Плагин jQuery для замены в браузерах прокрутки по умолчанию.

к содержанию ↑

jQuery.SerialScroll

Анимированная прокрутка серии.

Анимированная прокрутка серии.

к содержанию ↑

jScroll

jScroll - это плагин jQuery для бесконечной прокрутки, написанный Филиппом Клаузинским

jScroll — это плагин jQuery для бесконечной прокрутки, написанный Филиппом Клаузинским. Бесконечная прокрутка; также известная как ленивая загрузка, бесконечная прокрутка, автопир, бесконечные страницы и т. д.

к содержанию ↑

FoldScroll

Экспериментальный плагин jQuery для прокрутки CSS 3D.

Экспериментальный плагин jQuery для прокрутки CSS 3D.

к содержанию ↑

scrollUp jQuery plugin

ScrollUp - это легкий плагин jQuery для создания настраиваемой функции «Прокрутка вверх», которая будет работать с любым веб-сайтом с легкостью.

ScrollUp — это легкий плагин jQuery для создания настраиваемой функции «Прокрутка вверх», которая будет работать с любым веб-сайтом с легкостью.

к содержанию ↑

multiScroll.js

Создавайте разделенные страницы с двумя вертикальными панелями прокрутки.

Создавайте разделенные страницы с двумя вертикальными панелями прокрутки. Совместимость с мобильными телефонами и устройствами и старыми баузерами, такими как IE 8.

к содержанию ↑

Any List Scroller

jQuery scrolling plugin by musings.it для прокрутки любого списка с любым контентом.

jQuery scrolling plugin by musings.it для прокрутки любого списка с любым контентом.

к содержанию ↑

qpScroll

qpScroll - это плагин jQuery, который создает фон параллакса для любой страницы или div

qpScroll — это плагин jQuery, который создает фон параллакса для любой страницы или div. Его очень легко настроить. Он может быть добавлен на любую существующую страницу без необходимости изменения маркировки HTML.

к содержанию ↑

jQuery Stick ’em

Сделайте контент липким в прокрутке, в точку.

Сделайте контент липким в прокрутке, в точку.

Parallax.js

Parallax Engine реагирует на ориентацию смарт-устройства

Parallax Engine реагирует на ориентацию смарт-устройства. Там, где нет оборудования для обнаружения гироскопа или обнаружения движения, вместо этого используется позиция курсора.

к содержанию ↑

Slinky.js

Slinky.js - это плагин jQuery для создания красивых списков навигации для прокрутки с заголовками штабелирования.

Slinky.js — это плагин jQuery для создания красивых списков навигации для прокрутки с заголовками штабелирования.

к содержанию ↑

Infinity.js

Infinity.js - это UITableView для Интернета: он ускоряет прокрутку по длинным спискам и сохраняет ваши бесконечные каналы

Infinity.js — это UITableView для Интернета: он ускоряет прокрутку по длинным спискам и сохраняет ваши бесконечные каналы бесперебойными и стабильными для ваших пользователей. Он небольшой, проверенный временем и высокоэффективный.

к содержанию ↑

Arbitrary Anchor

Этот плагин позволяет странице прокручивать любой произвольный объект на странице на основе селектора jQuery / CSS.

Этот плагин позволяет странице прокручивать любой произвольный объект на странице на основе селектора jQuery / CSS.

к содержанию ↑

Waypoints

Waypoints - это библиотека, которая упрощает выполнение функции всякий раз, когда вы переходите к элементу.

Waypoints — это библиотека, которая упрощает выполнение функции всякий раз, когда вы переходите к элементу.

к содержанию ↑

jQuery.kinetic

Добавьте функциональность кинетической прокрутки в контейнер с помощью мыши или сенсорных устройств

Добавьте функциональность кинетической прокрутки в контейнер с помощью мыши или сенсорных устройств.

к содержанию ↑

Scrolling Progress Bar

. Каждый раздел содержимого имеет идентификатор, который помогает вычислять процент. Каждый бар имеет ссылку, чтобы сгладить

Есть два компонента этого эффекта. Содержание и бары. Каждый раздел содержимого имеет идентификатор, который помогает вычислять процент. Каждый бар имеет ссылку, чтобы сгладить прокрутку к этому разделу.

к содержанию ↑

jQuery Smooth Div Scroll

Smooth Div Scroll - это плагин jQuery, который прокручивает содержимое по горизонтали влево или вправо.

Smooth Div Scroll — это плагин jQuery, который прокручивает содержимое по горизонтали влево или вправо.

к содержанию ↑

jQuery Story Tale

CSS 3 Анимация запускается в прокрутке, но с твистом истории.

CSS 3 Анимация запускается в прокрутке, но с твистом истории.

к содержанию ↑

pagePiling.js

pagePiling  - плагин от Alvaro Trigo. Создайте прокрутку огромного числа разделов.

pagePiling  — плагин от Alvaro Trigo. Создайте прокрутку огромного числа разделов.

к содержанию ↑

AnimateScrollNavigation.js

Простой плагин jQuery, расширяющий плагин animateScroll с возможностями одиночной страницы.

Простой плагин jQuery, расширяющий плагин animateScroll с возможностями одиночной страницы.

к содержанию ↑

jQuery Animation Scroll Plugin

Мобильный дружественный viewport активирует анимацию jQuery Plugin, используя greensock.

Мобильный дружественный viewport активирует анимацию jQuery Plugin, используя greensock.

к содержанию ↑

jQuery.ScrollTo

Простая прокрутка элементов с помощью jQuery.

Простая прокрутка элементов с помощью jQuery.

к содержанию ↑

perfect-scrollbar

Крошечный, но совершенный плагин прокрутки jQuery

Крошечный, но совершенный плагин прокрутки jQuery

к содержанию ↑

Smooth Scroll Plugin

Автоматически проецирует одинаковые ссылки на страницы.

Автоматически проецирует одинаковые ссылки на страницы.

к содержанию ↑

Endless Scroll jQuery Plugin

Бесконечная прокрутка (или infinite scrolling)

Бесконечная прокрутка (или infinite scrolling) является популярным методом среди веб-сайтов 2.0, таких как Google Reader и Live Image Search, где вместо подкачки через элементы, используя традиционную технику разбиения на страницы, страница просто продолжает загружать новые элементы, прикрепленные к концу.

Плагин рейтинга создан автором этого блога. Буду очень признателен, если вы сможете его поддержать (ссылка)

p.s. Если статья была полезной и вас переполняет чувство благодарности, можете поддержать меня долларом на патреоне

Об авторе

Web Developer. I have expirience in FrontEnd, Backend, Devops. PHP, Python, Javascript (Vue.js, React.js)

Смотреть посты