Rellax.js - ميزات مجانية المنظر باستخدام الفانيليا جافا سكريبت
التمرير المنظر يبدو لا يصدق عندما فعلت الحق. إنها ليست ميزة ستحتاج إليها في كل موقع ، ولكن بالنسبة للمواقع الإبداعية والصفحات المقصودة ، عناصر المنظر جذب الانتباه بسرعة.
هناك الكثير من مكتبات JavaScript المجانية لـ آثار التمرير المتحركة لكن الكثير منها منتفخ أو شديد التعقيد بالنسبة لبعض الناس.
لهذا السبب أوصي Rellax.js لاحتياجات المنظر الخاص بك. إنه مكون إضافي مفتوح المصدر مبني على JavaScript vanilla ، لذلك لا يوجد لديه أي تبعيات.
افتراضيا ، هو لا يتطلب سوى استدعاء وظيفة بسيطة لتعيين فئة المنظر لعناصر الصفحة. ثم ، أثناء التمرير ، هذه العناصر البقاء ثابتا والتحرك جنبا إلى جنب مع وجهة نظر المستخدم.
يمكنك تخصيص هذه العناصر لتظهر أقرب أو أبعد أو وراء عناصر الصفحة. هذا يخلق وهم العمق على الصفحة ويعمل كل ذلك من خلال مكتبة JavaScript واحدة بسيطة.
كل شفرة المصدر Rellax متاحة مجانًا على GitHub إذا كنت تريد تنزيل نسخة.
الإعداد بأكمله يستخدم وظيفة واحدة JS استهداف .rellax الطبقة مثل ذلك:
var rellax = جديد Rellax ('. rellax')؛ لاحظ أنه يمكنك استخدام الكثير أي فئة تريد, لكن المثال التجريبي يستخدم .rellax من أجل البساطة.
من هنا ، أنت فقط التفاف العناصر المنظر الخاص بك داخل div مع .rellax الطبقة و ضبط سمة السرعة. هذا يعمل من خلال rellax-سرعات البيانات السمة المخصصة التي تقبل القيم من -10 إلى +10.
وهنا ل مثال مقتطف من HTML على الصفحة التجريبية:
أنا بطيئة للغاية وسلسة
بامكانك ايضا عناصر المركز على الصفحة و تخصيص مواقف العناصر عبر CSS.
لا يخبرك Rellax عن كيفية هيكلة الصفحة أو كيفية تعريف عناصر CSS على صفحتك. كل ما يفعله هو إنشاء تأثير التمرير المنظر الطبيعي مع جافا سكريبت نقية. كيف تستخدم هذا الأمر متروك لك تمامًا.
لرؤية عرض حي, ألقِ نظرة سريعة على الموقع الرئيسي أو استعرض من خلال GitHub repo. يتضمن ذلك بعض الوثائق ، إلى جانب روابط لمواقع الويب الحية باستخدام Rellax.js.
والأفضل من ذلك كله ، أن الفريق مستعد دائمًا لاستقبال طلبات السحب ، لذلك إذا لاحظت أي مشاكل أو كانت لديك اقتراحات بشأن الميزات ، فما عليك سوى إرسال رسالة سريعة إلى الفريق.
