Създайте свой собствен ефект на превъртане на страницата с Roll.js
Можете да намерите десетки библиотеки за превъртане в мрежата. Повечето от тях са написани на JavaScript и имат свои собствени ефекти, които можете да препрофилирате за оформления на една страница, анимации на скрол и още много други неща..
Но какво ще кажеш кодиране на вашите собствени ефекти на превъртане? Или какво, ако просто искате прост начин за проследяване на това колко далеч е надолу страницата, която потребителят е превърнал?
Roll.js е библиотеката, която търсите. Това Скрипт с отворен код е луд малък и супер лесен за използване. Можете да работите с няколко реда JavaScript. И най-хубавото е, че не ви принуждава да изпълнявате нещо конкретно, а по-скоро ви дава инструментите да създадете свои собствени персонализирани функции за превъртане.
Целта на тази библиотека е да помогне на разработчиците да структурират своите ефекти на превъртане без много усилия.
Ако погледнете главния репо GitHub ще намерите цялото ръководство за настройка с няколко примерни фрагмента. Можеш изпълнете функции, за да извикате колко се превърта потребителят, или различно “стъкла” на страницата.
Те работят най-добре при оформлението на една страница, но можете да използвате Roll.js за толкова много.
С едно извикване на функция можете да изтеглите данни с всеки скрол, който включва:
- Общи стъпки на страницата (ако е приложимо).
- Общо% превъртана страница надолу.
- Текуща позиция на страница в пиксели.
- Общата височина на екрана за изглед, основана на размера на устройството.
Това също работи с връзки за прескачане, които водят потребителите (или нагоре) до определени части на страницата.
Но можете да намерите много от тези функции и в други библиотеки. Какво прави Roll.js толкова специален?
Част от него е синтаксисът, но големият продавач тук е общия размер на библиотеката 8KB когато е намален. Това е доста малка за такава подробна библиотека за превъртане!
Можете да видите как това работи на главната демо страница и можете дори изтеглете изходния код на Roll.js, за да копаете сами в тези демонстрации.
Всичко от демонстрациите на живо и суровите библиотечни файлове може да бъде изтеглено от GitHub и те са изключително лесни за работа.
Но ако имате някакви въпроси, предложения или искате да споделите благодарността си за страхотната библиотека, можете да заснемете съобщение до създателя @williamngan.