التمرير المنظر أصبح سهلاً مع StickyStack.js

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

يمكنك أيضا بناء أسلوب المنظر الفريد باستخدام StickyStack.js توصيل في. انها بنيت على مسج ويبقي كل قسم من أقسام الصفحة الرئيسية متمسكًا بالأعلى أثناء التمرير لأسفل.

هذا يخلق وهم من موقع الطبقات حيث كل صفحة “كومات” على رأس الآخر. إنه أمر رائع حقًا ومن السهل إعداده بمفردك.

في حين أنه من السهل الإعداد ، إلا أنه يتطلب بعض الفهم لتطوير الواجهة الأمامية.

تحتاج إلى الأول إنشاء أقسام صفحة فردية داخل الحاوية الرئيسية. بهذه الطريقة سيكون لديك كل شيء مغلق في HTML, حتى تتمكن من استهداف كل شيء باستخدام وظيفة StickyStack jQuery.

كما يأتي مع عدد قليل من الخيارات حيث يمكنك تخصيص الحاوية الأم, ال العناصر التي يجب أن تكدس, و ممكن مربع الظل إذا كنت تحب هذا التأثير.

هنا أ عينة قليلا من التعليمات البرمجية من صفحة جيثب:

 $ ('. main-content-wrapper'). stickyStack (containerElement: '.main-content-wrapper'، stackingElement: 'section'، boxShadow: '0 -3px 20px rgba (0، 0، 0، 0.25)' )؛ 

رغم أن هذا لم يتم تحديثه منذ حوالي عامين ، إلا أنه لا يزال مكونًا إضافيًا يمكن الاعتماد عليه. هذا عملت في جميع المتصفحات التي اختبرتها (Chrome و Safari و Firefox) مع دعم لجميع إصدارات jQuery.

بالإضافة إلى ذلك ، الملف المصغر هو فقط 2 كيلو بايت وهو حجم لائق لبرنامج المساعد.

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

يمكنك أيضا التحقق من أ عرض حي على CodePen إذا كنت تريد أن ترى كيف يبدو هذا على موقع مباشر.