Начална » Toolkit » Създайте свой собствен ефект на превъртане на страницата с Roll.js

    Създайте свой собствен ефект на превъртане на страницата с Roll.js

    Можете да намерите десетки библиотеки за превъртане в мрежата. Повечето от тях са написани на JavaScript и имат свои собствени ефекти, които можете да препрофилирате за оформления на една страница, анимации на скрол и още много други неща..

    Но какво ще кажеш кодиране на вашите собствени ефекти на превъртане? Или какво, ако просто искате прост начин за проследяване на това колко далеч е надолу страницата, която потребителят е превърнал?

    Roll.js е библиотеката, която търсите. Това Скрипт с отворен код е луд малък и супер лесен за използване. Можете да работите с няколко реда JavaScript. И най-хубавото е, че не ви принуждава да изпълнявате нещо конкретно, а по-скоро ви дава инструментите да създадете свои собствени персонализирани функции за превъртане.

    Целта на тази библиотека е да помогне на разработчиците да структурират своите ефекти на превъртане без много усилия.

    Ако погледнете главния репо GitHub ще намерите цялото ръководство за настройка с няколко примерни фрагмента. Можеш изпълнете функции, за да извикате колко се превърта потребителят, или различно “стъкла” на страницата.

    Те работят най-добре при оформлението на една страница, но можете да използвате Roll.js за толкова много.

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

    • Общи стъпки на страницата (ако е приложимо).
    • Общо% превъртана страница надолу.
    • Текуща позиция на страница в пиксели.
    • Общата височина на екрана за изглед, основана на размера на устройството.

    Това също работи с връзки за прескачане, които водят потребителите (или нагоре) до определени части на страницата.

    Но можете да намерите много от тези функции и в други библиотеки. Какво прави Roll.js толкова специален?

    Част от него е синтаксисът, но големият продавач тук е общия размер на библиотеката 8KB когато е намален. Това е доста малка за такава подробна библиотека за превъртане!

    Можете да видите как това работи на главната демо страница и можете дори изтеглете изходния код на Roll.js, за да копаете сами в тези демонстрации.

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

    Но ако имате някакви въпроси, предложения или искате да споделите благодарността си за страхотната библиотека, можете да заснемете съобщение до създателя @williamngan.