خطوط خلفية متحركة تنتقل عند التحويم

كم مرة يجب أن تصل إلى CSS background-size منشأه؟ إذا كنت مثلي - وربما الكثير من الأشخاص الموجودين في الواجهة الأمامية - فعادة ما يحدث ذلك عندما تكون أنت background-size: cover صورة لملء مساحة عنصر بأكمله.

حسنًا ، لقد واجهت تحديًا مثيرًا للاهتمام يتطلب تغيير حجم الخلفية بشكل أكثر تقدمًا: خطوط الخلفية التي تنتقل عند المرور فوقها. تحقق من ذلك وقم بتمريره بالمؤشر:

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

لنبدأ بإعداد بسيط للغاية لإبقاء الأمور بسيطة. أنا أتحدث عن أغنية واحدة

في HTML على هيئة مربع أخضر:

div {
  width: 500px;
  height: 500px;
  background: palegreen;
}

إعداد خطوط الخلفية

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

div {
  width: 500px;
  height: 500px;
  background: 
    linear-gradient(black, black) top right,
    linear-gradient(black, black) top 100px right,
    linear-gradient(black, black) top 200px right,
    linear-gradient(black, black) top 300px right,
    linear-gradient(black, black) top 400px right, 
    palegreen;
}

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

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
}

لذا، فإن --gt القيمة هي التدرج و --n هو ثابت نستخدمه لدفع الخطوط إلى أسفل بحيث يتم إزاحتها رأسيًا. وربما لاحظت أنني لم أقم بتعيين تدرج حقيقي ، بل خطوط سوداء صلبة في linear-gradient() الوظيفة - هذا مقصود وسنتعرف على سبب قيامي بذلك بعد قليل.

هناك شيء آخر يجب علينا فعله قبل المضي قدمًا وهو منع خلفياتنا من التكرار ؛ وإلا ، فسيتم تجانبها وملء المساحة بأكملها:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
  background-repeat: no-repeat;
}

كان من الممكن أن نضع background-repeat في ال background الاختزال ، لكنني قررت أن أكسره هنا لتسهيل قراءة الأشياء.

موازنة المشارب

لدينا من الناحية الفنية خطوطًا ، ولكن من الصعب جدًا تحديدها لأنه لا توجد مسافات بينها وتغطي الحاوية بأكملها. إنه أشبه بمربع أسود صلب.

هذا هو المكان الذي نتمكن من استخدام background-size منشأه. نريد أن نضبط ارتفاع وعرض الأشرطة وتدعم الخاصية تركيبًا ثنائي القيمة يسمح لنا بالقيام بذلك بالضبط. ويمكننا ربط هذه الأحجام عن طريق فصلها بفاصلة بالطريقة نفسها التي فعلناها background.

لنبدأ ببساطة عن طريق تحديد العروض أولاً. استخدام صيغة القيمة المفردة لـ background-size يضبط العرض ويضبط الارتفاع افتراضيًا على auto. أنا أستخدم قيمًا عشوائية تمامًا هنا ، لذا عيِّن القيم على أفضل ما يناسب تصميمك:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
  background-repeat: no-repeat;
  background-size: 60%, 90%, 70%, 40%, 10%;
}

إذا كنت تستخدم نفس القيم التي أستخدمها ، فستحصل على ما يلي:

لا يبدو بالضبط كما لو أننا حددنا العرض لجميع الخطوط ، أليس كذلك؟ هذا بسبب auto ارتفاع سلوك بناء الجملة أحادي القيمة. الشريط الثاني أوسع من الشريط الآخر الذي تحته ، وهو يغطيهما. يجب أن نضع آفاقنا حتى نتمكن من رؤية عملنا. يجب أن تكون جميعها بنفس الارتفاع ويمكننا بالفعل إعادة استخدام --n متغيرًا ، مرة أخرى ، لتبسيط الأمور:

div {
  --gt: linear-gradient(black, black);
  --n: 100px;

  width: 500px;
  height: 500px;
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    palegreen;
    background-repeat: no-repeat;
    background-size: 60% var(--n), 90% var(--n), 70% var(--n), 40% var(--n), 10% var(--n); // HIGHLIGHT 15
}

آه ، أفضل بكثير!

إضافة فجوات بين الخطوط

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

يمكننا الاستمرار في استخدام --n متغير ، ولكن اطرح كمية صغيرة ، على سبيل المثال 5px، وذلك باستخدام calc() لنحصل على ما نريد.

background-size: 60% calc(var(--n) - 5px), 90% calc(var(--n) - 5px), 70% calc(var(--n) - 5px), 40% calc(var(--n) - 5px), 10% calc(var(--n) - 5px);

هذا كثير من التكرار يمكننا حذفه باستخدام متغير آخر:

div {
  --h: calc(var(--n) - 5px);
  /* etc. */
  background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}

اخفاء ومزج

لنقم الآن بتبديل ملف palegreen لون الخلفية الذي كنا نستخدمه للأغراض المرئية حتى هذه النقطة للأبيض.

div {
  /* etc. */
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    #fff;
  /* etc. */
}

نمط مثل هذا بالأبيض والأسود مثالي للإخفاء والمزج. للقيام بذلك ، سنختتم أولاً

في حاوية رئيسية جديدة وإدخال الثانية

تحته:

سنفعل القليل من إعادة تحليل CSS هنا. الآن بعد أن أصبح لدينا حاوية رئيسية جديدة ، يمكننا تمرير الثابت width و height الخصائص التي كنا نستخدمها في

هناك:

section {
  width: 500px;
  height: 500px;
} 

سأستخدم أيضًا CSS Grid لوضع الاثنين

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

section {
  display: grid;
  align-items: center;
  justify-items: center;
  width: 500px;
  height: 500px;
} 

section > div {
  width: inherit;
  height: inherit;
  grid-area: 1 / 1;
}

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

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

للحصول على هذا العمل ، سأقوم بتطبيق التدرج الحقيقي الذي نريد رؤيته في الأول

أثناء تطبيق قواعد النمط من البداية

على الجديد ، باستخدام :nth-child() المحدد الزائف:

div:nth-child(1) { 
  background: linear-gradient(to right, red, orange); 
}

div:nth-child(2)  {
  --gt: linear-gradient(black, black);
  --n: 100px;
  --h: calc(var(--n) - 5px);
  background: 
    var(--gt) top right,
    var(--gt) top var(--n) right,
    var(--gt) top calc(var(--n) * 2) right,
    var(--gt) top calc(var(--n) * 3) right,
    var(--gt) top calc(var(--n) * 4) right, 
    white;
  background-repeat: no-repeat;
  background-size: 60% var(--h), 90% var(--h), 70% var(--h), 40% var(--h), 10% var(--h);
}

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

div:nth-child(2)  {
  /* etc. */
  mix-blend-mode: screen;
}

لقد استخدمت لون خلفية بيج في العرض التوضيحي الذي عرضته في بداية هذه المقالة. يسمح هذا النوع الأغمق قليلاً من التلوين الأبيض الفاتح للون قليلاً بالتسرب عبر بقية الخلفية:

تأثير التحويم

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

في حالتنا) تحوم. عندما يتم تحريكه ، سنقوم بتغيير حجم الخلفية للخطوط الموجودة في الثانية

:

/* When 
 is hovered, change the second div's styles */
section:hover > div:nth-child(2){
  /* styles go here */
}

سنرغب في تغيير ملف background-size من المشارب إلى العرض الكامل للحاوية مع الحفاظ على نفس الارتفاع:

section:hover > div:nth-child(2){
  background-size: 100% var(--h);
}

هذا "يستقر" الخلفية إلى العرض الكامل. إذا أضفنا القليل transition إلى هذا ، ثم نرى الخطوط تتوسع عند المرور فوقها:

section:hover > div:nth-child(2){
  background-size: 100% var(--h);
  transition: background-size 1s;
}

هذا هو العرض النهائي مرة أخرى:

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

هذا هو التفاف!

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

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