Створіть власні ефекти прокручування сторінки за допомогою Roll.js

Ви можете знайти десятки бібліотек прокрутки по всьому Інтернету. Більшість з них написані на JavaScript і мають свої власні ефекти, які ви можете рестайлінгу для макетів однієї сторінки, анімації за допомогою прокрутки та багато іншого.

Але про що кодування власних ефектів прокручування? Або що, якщо ви просто хочете простий спосіб відстеження, як далеко вниз сторінки прокручується користувачем?

Roll.js - це бібліотека, яку ви шукаєте. Це Сценарій з відкритим вихідним кодом є божевільним малим і супер простим у використанні. Це можна зробити за допомогою декількох рядків JavaScript. І краще за все це не змушує вас виконувати щось конкретне, а скоріше надає інструменти створити власні функції прокрутки.

Мета цієї бібліотеки - допомогти розробникам структурувати свої ефекти прокрутки без особливих зусиль.

Якщо ви подивитеся на головний репозитарій GitHub, ви знайдете весь посібник з налаштування з декількома прикладами фрагментів. Ти можеш виконувати функції, щоб викликати, як далеко прокручується користувач, або до іншого “панелі” на сторінці.

Вони найкраще працюють на макетах на одній сторінці, але ви можете використовувати Roll.js так багато.

За допомогою одного виклику функції ви можете витягувати дані з кожним прокручуванням, що включає:

Загальна кількість сторінок сторінки (якщо є).
Всього% прокручується вниз.
Поточна позиція на сторінці в пікселях.
Загальна висота вікна перегляду залежно від розміру пристрою.

Це також працює з посиланнями для переходу, які приводять користувачів до певних частин сторінки.

Але багато інших функцій можна знайти і в інших бібліотеках. Що робить Roll.js таким особливим?

Частиною цього є синтаксис, але великим продавцем тут є загальний розмір бібліотеки 8 Кб при мінімізації. Це дуже дрібниця для такої деталізованої бібліотеки прокрутки!

Ви можете побачити, як це працює на головній демонстраційній сторінці, і ви навіть можете завантажте вихідний код Roll.js, щоб самостійно викопати ці демо-версії.

Все, починаючи від демонстрацій та файлів бібліотеки, можна витягти з GitHub, і вони дуже легко працювати.

Але якщо у вас є якісь питання, пропозиції, або ви хочете поділитися своїми подяками за чудову бібліотеку, ви можете зняти повідомлення автору @williamngan.