Но как насчет программирования своих собственных эффектов прокрутки? А что, если вы просто хотите проследить, насколько вниз прокручивается страница пользователя?
Roll.js - это та библиотека, которую вам поможет в этом. Это очень маленький и простой в использовании скрипт с открытым исходным кодом. Вы можете «заставить» его работать всего несколькими строками JavaScript. И что самое приятное, она не заставляет вас выполнять какие-либо действия, а просто предоставляет инструменты для создания собственных эффектов прокрутки.
Цель этой библиотеки - помочь разработчикам структурировать свои эффекты прокрутки без особых усилий.
Если вы взгляните на основной репозиторий на gitHub, то там вы найдете довольно полную инструкцию по установке библиотеки, а также примеры ее использования. Вы можете вызывать функции для вычисления насколько посетитель прокрутил страницу или определить добрался ли он до определенного места на странице.
Лучше всего это работает на одностраничных макетах, но вы можете использовать Roll.js и для других целей.
С помощью одного вызова функции вы можете получить данные о каждой прокрутке, которые включает в себя:
- Количество шагов прокрутки страницы (если возможно)
- % прокрученной области от высоты всей страницы
- Текущую позицию на странице
- Общую высоту области просмотра в зависимости от размера устройства
Также это работает и ссылками на странице, которые позволяют посетителю перемещаться вверх-вниз по странице. Описанные возможности есть и у многих других библиотек. Что делает Roll.js такой особенной?
Частично — это синтаксис, но большое преимущество — это общий размер библиотеки при минимизации - 8 КБ. Это чертовски мало для такой библиотеки прокрутки с такими широкими возможностями!
Вы можете увидеть, как это работает, на демонстрационной странице. Также здесь вы сможете скачать исходный код Roll.js, чтобы разобраться в этих демонстрациях самостоятельно. Любой из файлов демонстрационных примеров и файлов библиотеки можно загрузить с GitHub. С ними очень легко работать.
Если у вас есть какие-либо вопросы, предложения или вы хотите поблагодарить за замечательную библиотеку, вы можете отправить сообщение создателю @williamngan.
Оригинал статьи: Build Your Own Page Scrolling Effects With Roll.js
Перевод: Земсков Матвей