14 js библиотек для работы со скроллингом
Содержание:
- Sal
- Библиотека Scrollspy и Smooth Scroll — scrollspy.js
- Motus
- Native Smooth Scroll Polyfill – smoothscroll.js
- Butter.js — Создание эффектов прокрутки с плавным движением
- Locomotive Scroll
- Scroll To Anchor
- Lax.js
- Scroll animate to
- Jump
- Rallax.js
- T-scroll
- ScrollTrigger
- AOS
После публикации статьи про скроллинг прошло достаточно много времени, а мир фронтенда очень динамичен и тренды и библиотеки очень быстро меняются.
Представляю вашему вниманию библиотеки скроллинга, которые популярны в 2021.
Плавная прокрутка — это современный стандарт веб-дизайна, который позволяет посетителю плавно прокручивать веб-страницу до определенной позиции.
В этой статье вы увидите подборку лучших библиотек написанных на JavaScript для плавной прокрутки.
к содержанию ↑
Sal
Ориентированная на производительность, легкая библиотека анимации прокрутки, написанная на ванильном JavaScript. Sal была создана, чтобы обеспечить эффективное и легкое решение для анимации элементов при прокрутке. Она основана на Intersection Observer, который обеспечивает потрясающую производительность с точки зрения проверки наличия элемента в области просмотра.
Скачать Смотреть
к содержанию ↑
Данная библиотека отлично подходит для создания небольших сайтов и landing page. Она создаёт красивое плавающее меню вверху окна, в котором все содержание страницы связано с его пунктами. Таким образом, при прокрутке страницы вы будете постепенно перемещаться по пунктам основного меню.
Демо Скачать
к содержанию ↑
Motus
Motus позволяет разработчикам создавать красивые анимации, имитирующие css keyframes и применяемые при прокрутке пользователем.
Демо Скачать
к содержанию ↑
smoothscroll.js — это легкий, настраиваемый полифилл Vanilla JavaScript для плавной прокрутки с использованием свойства CSS scroll-behavior: smooth.
Используйте этот полифилл для реализации функции плавной прокрутки в тех браузерах, которые не поддерживают её: MS Edge, Internet Explorer и Safari.
Демо Скачать
к содержанию ↑
Butter.js — Создание эффектов прокрутки с плавным движением
Простая библиотека JavaScript, которая применяет плавную прокрутку импульса (также называемую инерционной прокруткой) к любым прокручиваемым элементам на странице.
Демо Скачать
к содержанию ↑
Простая библиотека прокрутки, используемая разработчиками Locomotive. Созданный слой поверх виртуальной прокрутки ayamflow, обеспечивает плавную прокрутку с поддержкой эффектов параллакса, переключения классов и запуска отслеживания событий, когда элементы находятся в области просмотра.
Демо Скачать
к содержанию ↑
Еще одна библиотека JavaScript с плавной прокруткой, которая плавно прокручивает страницу до определенных якорей со смещениями в документе. Таким образом, вы можете завязать ссылки на определенные части страницы и при нажатии на неё будет выполнена плавная прокрутка к нужному элементу.
Демо Скачать
к содержанию ↑
Lax.js
Простая и легкая ванильная библиотека JavaScript для создания плавных и красивых анимаций при прокрутке.
Lax.js 2.0 была полностью переписана с упором на модульность и гибкость, предоставляя больше инструментов для создания потрясающих анимаций. Был добавлен новый синтаксис анимации JavaScript, позволяющий использовать более сложные комбинации эффектов, также анимациям можно придать инерцию при прокрутке.
Демо Скачать
к содержанию ↑
Данная библиотека во многом похожа на предыдущую.
Библиотека JavaScript scroll-animate-to анимирует прокрутку до указанной точки в документе.
Демо Скачать
к содержанию ↑
Jump
Современная библиотека плавной прокрутки. Jump была разработана с учетом современного рабочего процесса JavaScript. Чтобы использовать её, рекомендуется иметь систему сборки, которая может переносить ES6 и связывать модули.
Демо Скачать
к содержанию ↑
Rallax.js
Rallax.js — это ванильный плагин JS, который реализует эффект динамической прокрутки параллакса без зависимостей. Rallax.js упрощает создание эффекта параллакса для целевого HTML-элемента с высокой производительностью и надежным API. Сделайте либо базовый параллакс прокрутки, либо измените его с помощью автоматических обратных вызовов, запуска / остановки, изменения скорости и мобильной обработки.
Демо Скачать
к содержанию ↑
Современная библиотека с открытием новых элементов при прокрутке, с полезными опциями и анимацией.
Демо Скачать
к содержанию ↑
Данная библиотека запускает классы для элементов html в зависимости от позиции прокрутки. Использует requestAnimationFrame, чтобы не мешать прокрутке пользователей.
Демо Скачать
к содержанию ↑
AOS
Эта библиотека позволяет вам анимировать элементы при прокрутке вниз и вверх. Если вы прокрутите страницу обратно вверх, элементы будут анимированы до своего предыдущего состояния и будут готовы к анимации снова, если вы прокрутите вниз.
Демо Скачать
Плагин рейтинга создан автором этого блога. Буду очень признателен, если вы сможете его поддержать (ссылка)
p.s. Если статья была полезной и вас переполняет чувство благодарности, можете поддержать меня долларом на патреоне
css, html, javascript, jquery, web, Модуль, плагин
Romuald Shmidtelson
Поделиться постом:
гладкая прокрутка | Плагины jQuery
Lenis — библиотека Smooth Scroll с открытым исходным кодом
14 ноября 2022 г.
Lenis – это библиотека с открытым исходным кодом, созданная для стандартизации процессов прокрутки и улучшения веб-сайтов с плавной навигацией при использовании платформы и сохранении ее доступности.
Читать дальше »
Locomotive Scroll — Обнаружение элементов в окне просмотра и плавная прокрутка с Parallax
16 апреля 2022 г. 1560 г. Прокрутить Последствия
Locomotive Scroll — это простая библиотека прокрутки, которая обеспечивает плавную прокрутку с поддержкой эффектов параллакса, переключения классов и запуска прослушивателей событий, когда элементы находятся в области просмотра.
Читать дальше »
lax.js — красивые и плавные эффекты прокрутки с помощью Javascript
16 марта 2019 г. 3990 Прокрутить
lax.js — это легкий и простой ванильный javascript-плагин для создания красивых и плавных анимаций при прокрутке.
Подробнее »
Залипающее меню навигации с плавной прокруткой
22 ноября 2018 г. 4197 Меню Прокрутить
Залипающее меню навигации с плавной прокруткой — это в основном шаблон с несколькими функциями, такими как активация при прокрутке, сжатие заголовка, добавление тени.
В логотип также добавлена функция плавной прокрутки (прокрутка сверху вверх) и плавная прокрутка к разделу при нажатии пункта меню.
Подробнее »
Плавная прокрутка Polyfill
Спецификация Scroll Behavior была представлена как расширение интерфейса Window , позволяющее разработчику выбрать встроенную плавную прокрутку.
Подробнее »
MoveTo — легкая библиотека Javascript с плавной прокруткой
21 марта 2017 г. 2031 г. Прокрутить
MoveTo — это легкая библиотека javascript с плавной прокруткой без каких-либо зависимостей.
Подробнее »
Плавная якорная прокрутка с помощью jQuery
01 сентября 2016 г. 1859 г. Прокрутить
Учебное пособие по созданию облегченной прокрутки
Подробнее »
Гладкая полоса прокрутки — пользовательская полоса прокрутки с плавной прокруткой
15 мая 2016 г. 5876 Прокрутить
Настройка полосы прокрутки в современных браузерах с плавной прокруткой.
Подробнее »
Как реализовать плавную прокрутку в JavaScript
12 мая 2016 г. 1780 г. Прокрутить
Плавная прокрутка — это шаблон пользовательского интерфейса, который постепенно улучшает возможности навигации по странице по умолчанию, анимируя изменение положения в пределах полосы прокрутки (область просмотра или прокручиваемый элемент) от местоположения активированной ссылки до местоположения элемент назначения, указанный в хеш-фрагменте URL-адреса ссылки.
Подробнее »
Jump.js — Библиотека плавной прокрутки
28 ноября 2015 г. 2047 г. Прокрутить
jump.js — небольшая, современная, независимая библиотека плавной прокрутки.
Читать дальше »
Scrollissimo — Плагин Javascript для плавной анимации, управляемой прокруткой
17 августа 2015 г. 1884 г. Прокрутить
Scrollissimo — это плагин javascript для создания плавной анимации с управлением прокруткой. Он также поддерживает сенсорные устройства.
Подробнее »
jQuery toTop() — Плавная прокрутка назад к началу
30 мая 2015 г. 1309 Прокрутить
jQuery toTop() — это простой, настраиваемый и сверхлегкий плагин для плавной прокрутки вверх.
Подробнее »
Scrollify — плагин jQuery для привязки прокрутки
14 июня 2014 г. 10713 Прокрутить
Scrollify — это плагин jQuery, который помогает прокручивать и плавно привязываться к разделам.
Полностью настраиваемый и оптимизированный для сенсорного управления.
Подробнее »
Плагин jQuery Smooth Scroll
17 февраля 2014 г. 1798 г. Прокрутить
jQuery Smooth Scroll Плагин автоматически обеспечивает плавную прокрутку ссылок на одной странице .
Подробнее »
Более 20 меню с прокруткой на jQuery — бесплатный код + демоверсии
1. Прилипающее меню навигации с плавной прокруткой падающая тень. Кроме того, функция плавной прокрутки также добавлена к логотипу (прокрутка сверху вверх) и плавная прокрутка к разделу при нажатии пункта меню.
Автор: Правин Бишт (PRVNBIST)
Ссылки: Исходный код / демонстрация
Созданы на: 15 февраля 2018
-процессор: SCSS
Препроцессор JS: Нет
Препроцессор HTML: Мопс
Теги: анимация, прокрутка, липкое меню
2.
JQuery | Одностраничная прокрутка NavАвтор: Tobias Bogliolo (Tobiasdev)
Ссылки: Исходный код / демонстрация
Создано: 4 июня 2017
Made with: HTML, CSS, JS
. навигация, jquery, javascript, меню, фрагмент
3. Вертикальный макет с навигацией
Разделы контента с вертикальной прокруткой и мобильной навигацией-гамбургером. Анимации легко настраиваются.
Автор: ETTRICS (ETTRICS)
Ссылки: Исходный код / демонстрация
Созданы: 7 апреля 2015
Сделано с: HTML, SCSS, JS
Теги: Vertic , навигация, анимация, отзывчивость
4. Плавная прокрутка + выделение ссылок
[В работе] Небольшой модуль JS с плавной прокруткой. Примите GSAP с помощью scrollTo plug или jquery (по умолчанию: jQuery).
Вы можете настроить поведение при прокрутке (атрибуция классов и т. д.). Есть место для оптимизации! 🙂
Вы можете настроить поведение при прокрутке (атрибуция классов и т. д.). Есть место для оптимизации! 🙂Автор: Raphael Pora (RPORA)
Ссылки: Исходный код / демонстрация
Создан: 28 ноября 2014
Made with: HTML, Stylus, JS
TATS: HTML, Stylus, JS
scroll, smoothscroll, vh
5. Навигация по одной странице с помощью Css-преобразований0005
Дата создания: 13 сентября 2014 г.
Сделано с помощью: HTML, SCSS, JS
6. Плавная прокрутка привязки
Сверхлегкая плавная прокрутка привязки. Вы можете переключать «активный» класс навигации и плавно прокручивать идентификаторы по всей странице. Я также изменил код, чтобы разрешить ссылки на идентификаторы вне основной навигации. Я также включил базовую функцию scrollTop.
Автор: Мэтт (mattsince87)
Ссылки: Исходный код / демонстрация
Созданы: 24 июня 2013 г.
Сделано с: HTML, SCSS, JS
. 7. Фиксированная страница прокрутки меню и активное меню Автор: yuki (yuki-san) Ссылки: Исходный код / Демо Создано: 24 февраля 2016 г.4 Сделано с помощью:
4 HTML, CSS, JS
8. Плавное прокрутка с JQUERY
Автор: Norbertas (Norby777)
Ссылки: Исходный код / демонстрация
Созданы: 29 августа 2018
Сделано с: HTML, SCSSSS, SCSS, SCSS, SCSS, SCSS, SCSS, SCSS, SCSS, SCSS, SCSS, SCSS, SCSS, SCSS, SCSS, SCSS, SCSS, SCSS, SCSS, SCSS, SCSS, SCSS. JS
9. Меню быстрого перехода с активным классом и плавной прокруткой
Автор: jrsqn (последний первый)
Ссылки: Исходный код / демонстрация
Создано: 25 апреля 2016 г.
Сделано с: HTML, JS
11. Project
Персональное портфолио на одну страницу для FreeCodeCamp, Zipline #1
Автор: Erin Manahan (sonorangirl)
Ссылки: Исходный код / Демо
900 Создать: 08 28 августа 2015 г.
Сделано с помощью: HTML, CSS, JS
Теги: портфолио, одностраничный, плавная прокрутка, лагерь свободного кода
12. Simple JQuery Scrollspy
:
Карли (Acarlie)
Ссылки: Исходный код / демонстрация
Созданы: 2 июля 2019 г.
Сделано с: HTML, CSS, JS
TAGS: JQuery, Scollspy
13. Простая прокрутка одной страницы
Автор: Sonam (Sonamtsu)
Ссылки: Исходный код / демонстрация
Созданы на: 14 ноября 2018 г.
Строитель: HTML, SCSS, JS
14.
Автор: Карен Григориан (Каренхо)
Ссылки: Исходный код / демонстрация
Созданы: 1 июня 2014 г.
Сделано с: HTML, CSS, JS
.0007 Теги: jquery, scroll, top
15. Эффект прокрутки вертикальной навигации
Простой эффект прокрутки анимации CSS3, созданный для вертикальной навигации. Настройка вертикальной навигации была основана на этой ручке (http://codepen.io/creotip/pen/BoOwBr/)
Автор: Janet Mendez (janmez)
Ссылки: Исходный код / Демо
Дата создания: 14 мая 2016 г.
Сделано с помощью: HTML, CSS, JS
Теги: вертикальная навигация, эффект прокрутки, css3, css3-анимация, навигация
Целая куча опций для одной страницы навигация.
