После публикации статьи про скроллинг прошло достаточно много времени, а мир фронтенда очень динамичен и тренды и библиотеки очень быстро меняются.
Представляю вашему вниманию библиотеки скроллинга, которые популярны в 2021.
Плавная прокрутка — это современный стандарт веб-дизайна, который позволяет посетителю плавно прокручивать веб-страницу до определенной позиции.
В этой статье вы увидите подборку лучших библиотек написанных на JavaScript для плавной прокрутки. Все представленные библиотеки работают без каких-либо дополнительных плагинов или дополнений (например, jQuery).
к содержанию ↑Ориентированная на производительность, легкая библиотека анимации прокрутки, написанная на ванильном JavaScript. Sal была создана, чтобы обеспечить эффективное и легкое решение для анимации элементов при прокрутке. Она основана на Intersection Observer, который обеспечивает потрясающую производительность с точки зрения проверки наличия элемента в области просмотра.
Данная библиотека отлично подходит для создания небольших сайтов и landing page. Она создаёт красивое плавающее меню вверху окна, в котором все содержание страницы связано с его пунктами. Таким образом, при прокрутке страницы вы будете постепенно перемещаться по пунктам основного меню.
Motus позволяет разработчикам создавать красивые анимации, имитирующие css keyframes и применяемые при прокрутке пользователем.
smoothscroll.js — это легкий, настраиваемый полифилл Vanilla JavaScript для плавной прокрутки с использованием свойства CSS scroll-behavior: smooth.
Используйте этот полифилл для реализации функции плавной прокрутки в тех браузерах, которые не поддерживают её: MS Edge, Internet Explorer и Safari.
Простая библиотека JavaScript, которая применяет плавную прокрутку импульса (также называемую инерционной прокруткой) к любым прокручиваемым элементам на странице.
Простая библиотека прокрутки, используемая разработчиками Locomotive. Созданный слой поверх виртуальной прокрутки ayamflow, обеспечивает плавную прокрутку с поддержкой эффектов параллакса, переключения классов и запуска отслеживания событий, когда элементы находятся в области просмотра.
Еще одна библиотека JavaScript с плавной прокруткой, которая плавно прокручивает страницу до определенных якорей со смещениями в документе. Таким образом, вы можете завязать ссылки на определенные части страницы и при нажатии на неё будет выполнена плавная прокрутка к нужному элементу.
Простая и легкая ванильная библиотека JavaScript для создания плавных и красивых анимаций при прокрутке.
Lax.js 2.0 была полностью переписана с упором на модульность и гибкость, предоставляя больше инструментов для создания потрясающих анимаций. Был добавлен новый синтаксис анимации JavaScript, позволяющий использовать более сложные комбинации эффектов, также анимациям можно придать инерцию при прокрутке.
Данная библиотека во многом похожа на предыдущую. Библиотека JavaScript scroll-animate-to анимирует прокрутку до указанной точки в документе.
Современная библиотека плавной прокрутки. Jump была разработана с учетом современного рабочего процесса JavaScript. Чтобы использовать её, рекомендуется иметь систему сборки, которая может переносить ES6 и связывать модули.
Rallax.js — это ванильный плагин JS, который реализует эффект динамической прокрутки параллакса без зависимостей. Rallax.js упрощает создание эффекта параллакса для целевого HTML-элемента с высокой производительностью и надежным API. Сделайте либо базовый параллакс прокрутки, либо измените его с помощью автоматических обратных вызовов, запуска / остановки, изменения скорости и мобильной обработки.
Современная библиотека с открытием новых элементов при прокрутке, с полезными опциями и анимацией.
Данная библиотека запускает классы для элементов html в зависимости от позиции прокрутки. Использует requestAnimationFrame, чтобы не мешать прокрутке пользователей.
Эта библиотека позволяет вам анимировать элементы при прокрутке вниз и вверх. Если вы прокрутите страницу обратно вверх, элементы будут анимированы до своего предыдущего состояния и будут готовы к анимации снова, если вы прокрутите вниз.
p.s. Если статья была полезной и вас переполняет чувство благодарности, можете поддержать меня долларом на патреоне
Получение первого заказа на фрилансе может быть вызовом, особенно для новичков, которые еще не имеют…
Разработка сайтов и веб-приложений стала в наше время неизбежной потребностью. Тем не менее, существует несколько способов…
Компании и специалисты по маркетингу тратят много времени и денег на изучение языка поисковых систем,…
Адаптивные изображения - это набор методов, используемых для загрузки правильного изображения в зависимости от разрешения…
Политика конфиденциальности - это документ, в котором подробно описывается, как компания или организация обрабатывает любую…
В современном мире много специалистов занятых поддержанием работы сайтов, и довольно часто многих из них…