كيفية تغيير اللون ديناميكيًا أثناء التمرير باستخدام CSS

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

لإصلاح هذه المشكلة ، تحتاج إلى عكس لون الشعار ديناميكيًا عندما يمر فوق عنصر بنفس اللون. تعرف على كيفية تحقيق هذا التأثير باستخدام CSS فقط ، دون الحاجة إلى JavaScript!

قم بتنزيل Starter Code

لمتابعة هذا البرنامج التعليمي ، قم بتنزيل رمز البدء من ملف مستودع جيثب إلى جهازك المحلي.

يفتح index.html في المستعرض الذي يجب أن يشبه الصفحة المعروضة هنا:

تحتوي صفحة HTML على شعار وأربعة أقسام. يحتوي كل قسم على عنوان وهمي وثلاث فقرات من النص الوهمي. نص الشعار هو نفس اللون الأسود لخلفية القسمين الثاني والرابع. يأتي هذا التأثير من nth-child (زوجي) منع في Styles.css، والذي يطبق الخلفية السوداء على الأقسام الزوجية.

جعل الشعار لاصق

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

الموقف: لزجة خاصته داخل ملف CSS. للتعمق في تحديد المواقع في CSS ، اقرأ المنشور الخاص بنا على خاصية موقع CSS.

تأكد من أن الشعار يلتصق بالأعلى ، لكن لا تفعل ذلك إلا على الشاشات الأكبر حجمًا (لأنه في أحجام الشاشات الأصغر ، يمكن أن يتخطى العناصر الأخرى). الأتى استعلام وسائط HTML سريع الاستجابة يخلق هذا التأثير:

@وسائط(العرض> 980 بكسل) {
.شعار { 
موضع: لزج; 
قمة: .5rem; 
 }
}

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

إضافة وضع المزج إلى رأسك اللاصق

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

@وسائط(العرض> 980 بكسل) { 
.شعار { 
موضع: لزج; 
قمة: .5rem; 
وضع المزج: اختلاف
 }
}

تحدد الخاصية mix-blend-mode CSS كيف يجب أن يمتزج محتوى العنصر مع محتوى أصل العنصر وخلفيته. تأخذ القيمة المختلفة قيمة الاختلاف لكل بكسل ، مما يؤدي إلى عكس ألوان الإضاءة. لذلك إذا كانت قيم اللون هي نفسها ، فإنها تصبح سوداء. الاختلافات في القيم ستعكس.

إضافة CSS أعلاه ستجعل الشعار يختفي تمامًا. هذا لأنك لم تقم بتعيين لون نص الشعار إلى الأبيض خارج استعلام الوسائط. افعل ذلك باستخدام الكود التالي:

.شعار { 
لون: أبيض; 
/ * خصائص CSS أخرى * /
}

الآن قمت بإعداد كل شيء بنجاح. قم بالتمرير لأسفل الصفحة وصولاً إلى الخلفية السوداء. سترى الشعار يتغير من الأسود إلى الأبيض.

يمكنك أيضًا العمل بألوان أخرى غير الأسود والأبيض. على سبيل المثال ، إذا كنت تريد تغيير لون نص شعارك إلى لون أزرق مخضر (# 008080) ، فستحصل على اللون الوردي على خلفيات بيضاء. الصورة التالية توضح ذلك.

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

استخدام صورة كشعار بدلاً من نص

لا تعمل هذه التقنية مع النص فحسب ، بل تعمل أيضًا مع الصور. بالطبع ، عليك التأكد من استخدام صورة بيضاء كشعار. يستخدم المثال التالي شعار lorem ipsum أبيض موجود في نفس المجلد مثل ملف index.html ملف:

<IMGsrc="loremipsum-297.svg"بديل="شعار لوريم إيبسوم">

الصورة المستخدمة هنا هي SVG (Scalable Vector Graphic) ، وهي نوع من ملفات ملف متجه.

الآن سيكون لون صورة شعارك أسود على خلفية بيضاء كما هو موضح في الصورة أدناه.

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

يمكنك أيضًا زيادة حجم الشعار عن طريق استبداله حجم الخط مع ارتفاع و عرض في كتلة CSS التي تستهدف الشعار. بعد كل شيء ، أنت الآن تتعامل مع صورة بدلاً من نص.

.شعار {
لون: أبيض;
عرض: 10rem;
/ * خصائص CSS أخرى * /
}

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

.شعار {
لون: أبيض;
عرض: 10rem;
وضع المزج: اختلاف;
/ * خصائص CSS أخرى * /
}

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

تعرف على المزيد من نصائح وحيل CSS

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

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