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

Представляю вашему вниманию библиотеки скроллинга, которые популярны в 2021.

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

В этой статье вы увидите подборку лучших библиотек написанных на JavaScript для плавной прокрутки. Все представленные библиотеки работают без каких-либо дополнительных плагинов или дополнений (например, jQuery).

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

Sal

Ориентированная на производительность, легкая библиотека анимации прокрутки, написанная на ванильном JavaScript. Sal была создана, чтобы обеспечить эффективное и легкое решение для анимации элементов при прокрутке. Она основана на Intersection Observer, который обеспечивает потрясающую производительность с точки зрения проверки наличия элемента в области просмотра.

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

Библиотека Scrollspy и Smooth Scroll – scrollspy.js

Данная библиотека отлично подходит для создания небольших сайтов и landing page. Она создаёт красивое плавающее меню вверху окна, в котором все содержание страницы связано с его пунктами. Таким образом, при прокрутке страницы вы будете постепенно перемещаться по пунктам основного меню.

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

Motus

Motus позволяет разработчикам создавать красивые анимации, имитирующие css keyframes и применяемые при прокрутке пользователем.

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

Native Smooth Scroll Polyfill – smoothscroll.js

smoothscroll.js – это легкий, настраиваемый полифилл Vanilla JavaScript для плавной прокрутки с использованием свойства CSS scroll-behavior: smooth.

Используйте этот полифилл для реализации функции плавной прокрутки в тех браузерах, которые не поддерживают её: MS Edge, Internet Explorer и Safari.

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

Butter.js – Создание эффектов прокрутки с плавным движением

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

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

Locomotive Scroll

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

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

Scroll To Anchor

Еще одна библиотека JavaScript с плавной прокруткой, которая плавно прокручивает страницу до определенных якорей со смещениями в документе. Таким образом, вы можете завязать ссылки на определенные части страницы и при нажатии на неё будет выполнена плавная прокрутка к нужному элементу.

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

Lax.js

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

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

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

Scroll animate to

Данная библиотека во многом похожа на предыдущую. Библиотека JavaScript scroll-animate-to анимирует прокрутку до указанной точки в документе.

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

Jump

Современная библиотека плавной прокрутки. Jump была разработана с учетом современного рабочего процесса JavaScript. Чтобы использовать её, рекомендуется иметь систему сборки, которая может переносить ES6 и связывать модули.

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

Rallax.js

Rallax.js – это ванильный плагин JS, который реализует эффект динамической прокрутки параллакса без зависимостей. Rallax.js упрощает создание эффекта параллакса для целевого HTML-элемента с высокой производительностью и надежным API. Сделайте либо базовый параллакс прокрутки, либо измените его с помощью автоматических обратных вызовов, запуска / остановки, изменения скорости и мобильной обработки.

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

T-scroll

Современная библиотека с открытием новых элементов при прокрутке, с полезными опциями и анимацией.

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

ScrollTrigger

Данная библиотека запускает классы для элементов html в зависимости от позиции прокрутки. Использует requestAnimationFrame, чтобы не мешать прокрутке пользователей.

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

AOS

Эта библиотека позволяет вам анимировать элементы при прокрутке вниз и вверх. Если вы прокрутите страницу обратно вверх, элементы будут анимированы до своего предыдущего состояния и будут готовы к анимации снова, если вы прокрутите вниз.

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

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

Об авторе

Web Developer. Имею экспертизу в таких вещах как FrontEnd, Backend, Devops. PHP, Python, Javascript (Vue.js, React.js)

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