مكتبات JavaScript لتأثيرات التمرير الرائعة

يأتي تصميم موقع الويب إلى حيز التنفيذ من خلال رسوم متحركة جيدة التنفيذ. إذا كنت تبحث عن المكتبات المناسبة لإضافة مؤثرات إلى مشروعك ، فقد قمت هنا بتقديم قائمة ببعض المكتبات يمكنك استخدامها لإعطاء تأثيرات بناءً على حدث التمرير.

عندما يقوم المستخدم بالتمرير لأسفل صفحة الويب الخاصة بك ، فإن هذا الإجراء يمكن تصميمه لإطلاق مجموعة متنوعة من خيارات الرسوم المتحركة مثل تأثيرات التلاشي ، التمويه ، ثلاثي الأبعاد ، المنظر ، والمزيد. هناك 25 مكتبة JS هنا يمكنها مساعدتك في تحقيق هذا النوع من الاستجابة في تصميم موقعك.

انتقل الكشف

مكتبة تسهل إضافة رسوم متحركة للتمرير لكل من الويب والجوال. يمكنك ضبط التخفيف المخصص ، والدورات ثلاثية الأبعاد ، والمدة والعديد من المعلمات mor على العنصر الذي تريد تحريكه.

تبعيات: لا شيء | بحجم: 2.9 كيلو بايت | رخصة: MIT

Aniview

مكون إضافي يعمل مع Animate.CSS لتمكين الرسوم المتحركة فقط عندما يأتي عنصر العرض إلى منفذ العرض.

تبعيات: مسج | بحجم: 1 كيلوبايت | رخصة: N / A

تتلاشى في الرأي

مكوّن إضافي يضيف تأثير التلاشي / الداخل إلى العناصر عند دخولها أو الخروج من إطار العرض المحدد مسبقًا.

تبعيات: مسج | بحجم: 3.81 كيلوبايت | رخصة: N / A

رائع

سوف تكشف WOW الرسوم المتحركة Animate.css عند حدث التمرير. يمكنك إعداد مدة الرسوم المتحركة ، والتأخير ، والإزاحة ، والتكرار مباشرة من ترميز HTML ، ثم اتصل بفئة العنصر من JS.

تبعيات: Animate.css | بحجم: 8.23 كيلو بايت | رخصة: MIT

ScrollMagic

سيعرض هذا البرنامج المساعد تأثيرًا "سحريًا" عندما يقوم المستخدم بالتمرير في الصفحة. إنها مثالية لتنشيط أو تثبيت عنصر أو تبديل فئة CSS ، كل ذلك يعتمد على موضع التمرير. يمكن لـ ScrollMagic العمل مع GSAP و VelocityJS في إنشاء مشهد للرسوم المتحركة. رؤية العروض الكاملة هنا.

تبعيات: مسج ، GSAP ، Velocity.js | بحجم: 16.9 كيلوبايت | رخصة: MIT

jScrollability

تتيح لك إمكانية jScrollability إنشاء صفحات ويب مفردة مع رسوم متحركة معقدة قائمة على التمرير. عند تنقل المستخدم ، سيتم تنشيط العنصر بناءً على مواضع التمرير. يتم تشغيل الرسوم المتحركة بناءً على عمق التمرير ، وبالطبع يمكنك تعيين بداية الحركة ونهايتها.

تبعيات: مسج | بحجم: 1.86 كيلو بايت | رخصة: MIT

pushIn.js

مكتبة بسيطة لإضافة تأثير dolly-in أو push-in إلى أي عنصر يعمل عند قيام المستخدم بالتمرير خلال الصفحة. من السهل تنفيذها: ما عليك سوى إضافة معلمات البدء والتوقف والسرعة إلى بيانات بارامس لعنصر HTML الخاص بك.

تبعيات: لا شيء | بحجم: 4.94 كيلو بايت | رخصة: N / A

Scrollissimo

هذه هي مكتبة JS لإضافة الرسوم المتحركة على نحو سلس التي تسيطر عليها التمرير. إنها تستخدم فتيات جرينسوك والجداول الزمنية لتوليد رسوم متحركة أكثر سلاسة.

تبعيات: GreenShock TweenLite / TweenMax | بحجم: 2.94 كيلو بايت | رخصة: N / A

jQuery الرسوم المتحركة التمرير المساعد

هذا هو البرنامج المساعد jQuery لإضافة الرسوم المتحركة المشغل viewport باستخدام Greensock. فهو يجعل من السهل تحريك العناصر من خلال الرسوم المتحركة ثلاثية الأبعاد التي تعمل على التيسير والتحويل والمقياس والتدوير والرسوم المتحركة.

تبعيات: مسج ، غرينشوك | بحجم: 14 كيلوبايت | رخصة: جنو جي بي إل

Circlr

يتيح لك Circlr إنشاء حركة دوران لعنصر ، يتم تشغيله عن طريق التمرير أو أحداث الماوس أو أحداث اللمس. إنه مثالي لتقديم عرض لمنتج يمكن مشاهدته من جميع درجات 360 ، يتم تنشيطه بواسطة تمرير المستخدم.

تبعيات: لا شيء | بحجم: 6.05 كيلوبايت | رخصة: MIT

Scrollimator

سيوضح لك Scrollimator الموضع وتقدم التمرير وإرجاع القيم التي يمكنك استخدامها لتغيير الرسوم المتحركة tween المرتبطة سلوك التمرير المستخدم. وهو يدعم التمرير الرأسي والأفقي.

تبعيات: لا شيء | بحجم: 37.7 كيلوبايت | رخصة: N / A

خافت

Crossfade هو مكون إضافي لإضافة تأثير crossfade إلى صورة. سيستمر تأثير الضبابية كلما مرر المستخدم لأسفل.

تبعيات: مسج | بحجم: 3.19 كيلوبايت | رخصة: MIT

انتقل صفحة تأثير

هذا واحد هو مكتبة لآثار التمرير الصفحة التجريبية التي أنشأتها CodyHouse. ويستخدم velocitey.js الرسوم المتحركة.

تبعيات: مسج ، Velocity.js | بحجم: 17.6 كيلوبايت | رخصة: N / A

jquery.parallax التمرير

تتيح لك هذه المكتبة إضافة تأثير المنظر السلس للتمرير الرأسي للصفحات. مجرد استيراد jQuery و jquery.easing.1.3.js ، ثم أضف "بيانات المنظر" السمة والمعايير الاختيارية لعنصرك لتخصيص التأثير.

تبعيات: مسج ، مسج | بحجم: 8.72 كيلوبايت | رخصة: جنو جي بي إل

parallax.js

Parallax.js هو مكون إضافي بسيط يضيف تأثير التمرير المنظر ، مستوحى من موقع Spotify.

تبعيات: مسج | بحجم: 6.63 كيلو بايت | رخصة: MIT

Enllax

Enllax هي مكتبة خفيفة للغاية للاستخدام في تطبيق تأثير المنظر على أي عنصر التمرير. يمكنك تعيين عناصر الخلفية أو المقدمة لإظهار تأثير ethis. وهو يعمل لكلا التمرير الرأسي والأفقي.

تبعيات: مسج | بحجم: 1.53 كيلو بايت | رخصة: MIT

طمس على التمرير

تساعدك هذه المكتبة على إضافة تأثير التمويه إلى صورة ، والتي سيتم تشغيلها عن طريق تمرير الصفحة. كلما قمت بالتمرير إلى أسفل الصفحة ، زادت وضوح الصورة.

تبعيات: لا شيء | بحجم: 1.1 كيلو بايت | رخصة: N / A

boxLoader

boxLoader هو مكون بسيط لتحميل العناصر عند تمرير الصفحة. المعلمة التي يجب ضبطها هي الاتجاهات (س أو ص) ، والموضع على النسبة المئوية ، والتأثير والمدة أيضًا.

تبعيات: مسج | بحجم: 3.42 كيلوبايت | رخصة: N / A

تمرير الصفحة المائلة

أثناء قيام المستخدم بالتمرير خلال إحدى الصفحات ، سيكشف هذا المكون الإضافي عن تأثير إمالة ثلاثي الأبعاد رائع للعنصر الذي قمت بإعداده.

تبعيات: مسج | بحجم: 1.5 كيلو بايت | رخصة: جنو جي بي إل

AhRelax

يوفر AhRelax وسيلة لعمل رسوم متحركة سريعة قائمة على التمرير. انها خفيفة الوزن وأيضا أداء رائع. يمكنك قراءة المزيد عنه هنا.

تبعيات: مسج | بحجم: 1.6 كيلو بايت | رخصة: MIT

التمرير الهوى

إذا كنت ترى تأثير التمرير الفائض على Android أو iOS ، فيمكنك الآن تطبيق هذا المكون الإضافي على موقعك. يمكنك إضافة رسم متحرك ، إما ترتد أو توهج ، عندما يصل المستخدم إلى أعلى / أسفل الصفحة.

تبعيات: مسج | بحجم: 2.64 كيلو بايت | رخصة: جنو جي بي إل

صورة المنظر التمرير

سيجعل هذا البرنامج المساعد العناصر تطفو وتتحرك أثناء قيام المستخدم بالتمرير لأسفل أو لأعلى الصفحة.

تبعيات: مسج | بحجم: 8.69 كيلوبايت | رخصة: MIT

Rlsmooth

هذا هو مكون إضافي صغير لإنشاء التأثير المتدفق عندما يقوم المستخدم بالبحث أو أسفل الصفحة. هناك ثلاثة تأثيرات متوفرة: الشريحة والتلاشي والعرض.

تبعيات: مسج | بحجم: 1.95 كيلو بايت | رخصة: MIT

Scrollme

يضيف تأثيرات بسيطة إلى التمرير في الصفحة مثل التدرج والعناصر وتغيير وتغيير عتامة العناصر. من السهل الإعداد: ما عليك سوى استيراد jQuery ، هذا المكون الإضافي ، وتعيين معلمات الرسوم المتحركة على ترميز العنصر.

تبعيات: مسج | بحجم: 5.45 كيلو بايت | رخصة: N / A

المنظر ImageScroll

يتيح لك هذا البرنامج المساعد إعطاء تأثير المنظر على أي صورة على صفحتك. انها تستخدم تحويل CSS3 لجعل تأثير العمل. هذا البرنامج المساعد لديه دعم ل jQuery و AMD.

تبعيات: مسج | بحجم: 8.01 كيلوبايت | رخصة: MIT