Создайте свои собственные эффекты прокрутки страницы с помощью Roll.js

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

Но что насчет кодирование ваших собственных эффектов прокрутки? Или что, если вы просто хотите проследить, как далеко вниз прокручивается страница пользователя?

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

Цель этой библиотеки - помочь разработчикам структурировать свои эффекты прокрутки без особых усилий..

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

Они лучше всего работают на одностраничных макетах, но вы можете использовать Roll.js для очень.

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

• Всего шагов страницы (если применимо).
• Всего% прокручиваемой страницы вниз.
• Текущая позиция на странице в пикселях.
• Общая высота области просмотра в зависимости от размера устройства.

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

Но вы можете найти множество этих функций и в других библиотеках. Что делает Roll.js таким особенным?

Частично это синтаксис, но большим продавцом здесь является общий размер библиотеки 8KB когда минимизируется. Это чертовски мало для такой подробной библиотеки прокрутки!

Вы можете увидеть, как это работает на главной демонстрационной странице, и вы можете даже загрузите исходный код Roll.js, чтобы сами разобраться в этих демонстрациях.

Все из живых демо-версий и файлов необработанных библиотек можно извлечь из GitHub, и с ними очень легко работать.

Но если у вас есть какие-либо вопросы, предложения или вы хотите поделиться своей благодарностью за замечательную библиотеку, вы можете отправить сообщение создателю @williamngan.