يضم موقع الويب الذي تم إطلاقه حديثًا ، The Markup ، سطرًا رائعًا: "Tech Big Thea's Conferay. نحن نشاهد BigTech." تم تطوير محتوى الموقع المثير للإعجاب في Upstatement ، ويتطابق مع التصميم والتكنولوجيا المتطورة. تشمل الميزات البارزة الطباعة النظيفة ، وتخطيط فريد من نوعه ، وتأثيرات الزاوية المذهلة على كتل المحتوى ، وعزر نقطة أنيقة وأنيقة.

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

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

1. يجب أن يكون لمحتوى المحتوى الرئيسي الحد الأدنى قدره 100 فولت في الساعة. في حين أن معظم مواقع الويب تلتزم بالفعل بهذا ، فمن الأهمية بمكان بالنسبة للوظائف الموثوقة.
2. تتطلب منطقة المحتوى الرئيسية لون خلفية صلبة لإخفاء تذييل التذييل قبل أن تنزلق إلى العرض.
3. يتم وضع تذييل في html بعد المحتوى الرئيسي. تضمن تعديلات تحديد المواقع النسبية و z-index أن المحتوى الرئيسي يبقى في الأعلى.
4. يتم استخدام تحديد المواقع اللاصقة لترسيخ التذييل إلى أسفل منفذ العرض.

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

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

أظهرت Preethi تقنية مماثلة مرة أخرى في عام 2018. والفرق الأساسي هنا هو استخدام التدرج الخطي لخلفية الجسم ، مما يوفر بديلاً مرنًا عن لون خلفية صلبة ، والذي قد يكون مقيدًا في سياقات التصميم معينة.

فيديو تعليمي

يتوفر برنامج تعليمي للفيديو بواسطة Stephen Shaw!