بناء الصفحة الخاصة بك التمرير آثار مع Roll.js
يمكنك العثور على العشرات من مكتبات التمرير في جميع أنحاء الويب. تتم كتابة معظمها في JavaScript ولديها مؤثرات خاصة بها ، يمكنك إعادة التصميم لتخطيطات الصفحات المفردة ، والرسوم المتحركة أثناء التنقل ، وغير ذلك الكثير.
لكن ماذا عن ترميز آثار التمرير الخاصة بك? أو ماذا لو كنت تريد فقط طريقة بسيطة لتتبع مدى تمرير الصفحة من قبل المستخدم?
Roll.js هي المكتبة التي تبحث عنها. هذه البرنامج النصي مفتوح المصدر مجنون صغير وسهل الاستخدام. يمكنك الحصول على هذا العمل مع بضعة أسطر من JavaScript. والأهم من ذلك كله أنه لا يجبرك على القيام بأي شيء محدد ، ولكن بدلاً من ذلك يعطيك الأدوات لإنشاء ميزات التمرير المخصصة الخاصة بك.
الهدف من هذه المكتبة هو مساعدة المطورين على تصميم تأثيرات التمرير دون بذل الكثير من الجهد.
إذا ألقيت نظرة على الريبو الرئيسي لـ GitHub ، فستجد دليل إعداد كاملًا مع بعض الأمثلة المختصرة. يمكنك تشغيل وظائف لاستدعاء مدى تمرير المستخدم, أو مختلفة “ألواح” على الصفحة.
تعمل هذه الأشياء بشكل أفضل على تخطيطات الصفحة الواحدة ولكن يمكنك استخدام Roll.js كثيرًا.
باستخدام مكالمة منفردة ، يمكنك سحب البيانات باستخدام كل عملية تمرير تتضمن:
- مجموع خطوات الصفحة (إن وجدت).
- إجمالي٪ انتقل إلى أسفل الصفحة.
- الموضع الحالي على الصفحة بالبكسل.
- إجمالي ارتفاع إطار العرض بناءً على حجم الجهاز.
يعمل هذا أيضًا مع ارتباطات الانتقال التي تنزل المستخدمين (أو أعلى) إلى أجزاء معينة من الصفحة.
ولكن يمكنك العثور على الكثير من هذه الميزات في المكتبات الأخرى أيضًا. ما الذي يجعل Roll.js خاص جدا?
جزء منه هو بناء الجملة ، لكن البائع الكبير هنا هو الحجم الكلي للمكتبة 8KB عندما minified. هذا صغير جدًا بالنسبة إلى مكتبة التمرير التفصيلية هذه!
يمكنك أن ترى كيف يعمل هذا على الصفحة التجريبية الرئيسية ويمكنك حتى قم بتنزيل شفرة مصدر Roll.js للحفر في تلك العروض التوضيحية بنفسك.
يمكن سحب كل شيء من العروض الحية وملفات المكتبة الخام من GitHub وهي سهلة الاستخدام للغاية.
ولكن إذا كان لديك أي أسئلة أو اقتراحات أو تريد مشاركة شكرك للمكتبة الرائعة ، فيمكنك إرسال رسالة إلى المنشئwilliamngan.
