CSS لانهائي ودوراني صورة متزلج

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

من خلال سلسلة صغيرة من المقالات ، سنستكشف بعض أشرطة تمرير CSS الفريدة وغير الشائعة. إذا كنت متعبًا من رؤية نفس المنزلقات الكلاسيكية ، فأنت في المكان الصحيح!

بالنسبة لهذه المقالة الأولى ، سنبدأ بشيء أسميه "شريط تمرير الصورة الدائرية الدائرية":

رائع ، أليس كذلك؟ لنفحص الكود!

ترميز HTML

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

s وأشياء أخرى.

تنطبق نفس القاعدة هنا - الكود الخاص بنا ليس سوى قائمة بالصور في الحاوية.

لنفترض أننا نعمل بأربع صور:

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

كيف تعمل؟

إليك مقطع فيديو حيث أزيله overflow: hidden من CSS حتى نتمكن من فهم كيفية تحرك الصور بشكل أفضل:

يبدو الأمر كما لو أن صورنا الأربعة موضوعة على دائرة كبيرة تدور عكس اتجاه عقارب الساعة.

جميع الصور لها نفس الحجم (يُشار إليها بـ S في الشكل). لاحظ الدائرة الزرقاء وهي الدائرة التي تتقاطع مع مركز كل الصور ولها نصف قطر (R). سنحتاج هذه القيمة لاحقًا للرسوم المتحركة الخاصة بنا. R مساوي ل 0.707 * S. (سأتخطى الهندسة التي تعطينا هذه المعادلة.)

دعنا نكتب بعض CSS!

سنستخدم شبكة CSS لوضع كل الصور في نفس المنطقة فوق بعضها البعض:

.gallery  {
  --s: 280px; /* control the size */

  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  padding: calc(var(--s) / 20); /* we will see the utility of this later */
  border-radius: 50%;
}
.gallery > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

لا شيء معقد للغاية حتى الآن. الجزء الصعب هو الرسوم المتحركة.

تحدثنا عن تدوير دائرة كبيرة ، ولكن في الواقع ، سنقوم بتدوير كل صورة على حدة لخلق وهم دائرة كبيرة دوارة. لذا ، دعنا نحدد الرسوم المتحركة ، m، وتطبيقه على عناصر الصورة:

.gallery > img {
  /* same as before */
  animation: m 8s infinite linear;
  transform-origin: 50% 120.7%;
}

@keyframes m {
  100% { transform: rotate(-360deg); }
}

تعتمد الحيلة الرئيسية على هذا الخط المميز. بشكل افتراضي ، يكون ملف CSS transform-origin الملكية تساوي center (أو 50% 50%) مما يجعل الصورة تدور حول مركزها ، لكننا لسنا بحاجة إليها للقيام بذلك. نحن بحاجة إلى تدوير الصورة حول مركز دائرة كبيرة الذي يحتوي على صورنا ومن هنا جاءت القيمة الجديدة لـ transform-origin.

بما أن R تساوي 0.707 * S، يمكننا القول بأنه R مساوي ل 70.7% من حجم الصورة. إليك رقم يوضح كيف حصلنا على 120.7% القيمة:

لنقم بتشغيل الرسوم المتحركة ونرى ما سيحدث:

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

.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child(4) { animation-delay: -6s; } /* -3 * 8s / 4 */

الأمور تتحسن بالفعل!

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

سنقوم بتحديث الإطارات الرئيسية للرسوم المتحركة لدينا للقيام بذلك:

@keyframes m {
  0%, 3% { transform: rotate(0); }
  22%, 27% { transform: rotate(-90deg); }
  47%, 52% { transform: rotate(-180deg); }
  72%, 77% { transform: rotate(-270deg); }
  98%, 100% { transform: rotate(-360deg); }
}

لكل 90deg (360deg/4، حيث 4 هو عدد الصور) سنضيف وقفة صغيرة. ستبقى كل صورة مرئية لـ 5% من المدة الإجمالية قبل الانتقال إلى المرحلة التالية (27%-22%, 52%-47%، إلخ.). سأقوم بتحديث ملف animation-timing-function باستخدام cubic-bezier() وظيفة لجعل الرسوم المتحركة مربي الحيوانات قليلاً:

الآن شريط التمرير لدينا مثالي! حسنًا ، مثالي تقريبًا لأننا ما زلنا نفتقد اللمسة النهائية: الحد الدائري الملون الذي يدور حول صورنا. يمكننا استخدام العنصر الزائف في ملف .gallery غلاف لصنعه:

.gallery {
  padding: calc(var(--s) / 20); /* the padding is needed here */
  position: relative;
}
.gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: inherit; /* Inherits the same padding */
  border-radius: 50%;
  background: repeating-conic-gradient(#789048 0 30deg, #DFBA69 0 60deg);
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.gallery::after,
.gallery >img {
  animation: m 8s infinite cubic-bezier(.5, -0.2, .5, 1.2);
}

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

لقد إنتهينا! لدينا منزلق دائري رائع:

دعونا نضيف المزيد من الصور

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

لهذا ، سنجعل الكود أكثر عمومية من خلال تقديم Sass. أولاً ، نحدد متغيرًا لعدد الصور ($n) وسنقوم بتحديث كل جزء حيث قمنا بترميز عدد الصور (4).

لنبدأ بالتأخيرات:

.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 8s / 4 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 8s / 4 */
.gallery > img:nth-child(4) { animation-delay: -6s; } /* -3 * 8s / 4 */

صيغة التأخير هي (1 - $i)*duration/$n، والذي يعطينا حلقة Sass التالية:

@for $i from 2 to ($n + 1) {
  .gallery > img:nth-child(#{$i}) {
    animation-delay: calc(#{(1 - $i) / $n} * 8s);
  }
}

يمكننا أيضًا جعل المدة متغيرًا إذا أردنا ذلك حقًا. لكن دعنا ننتقل إلى الرسوم المتحركة:

@keyframes m {
  0%, 3% { transform: rotate(0); }
  22%, 27% { transform: rotate(-90deg); }
  47%, 52% { transform: rotate(-180deg); }
  72%, 77% { transform: rotate(-270deg); }
  98%, 100% {transform: rotate(-360deg); }
}

دعونا نبسطها للحصول على رؤية أفضل للنمط:

@keyframes m {
  0% { transform: rotate(0); }
  25% { transform: rotate(-90deg); }
  50% { transform: rotate(-180deg); }
  75% { transform: rotate(-270deg); }
  100% { transform: rotate(-360deg); }
}

الخطوة بين كل دولة تساوي 25% - الذي 100%/4 - ونضيف أ -90deg زاوية - وهي -360deg/4. هذا يعني أنه يمكننا كتابة الحلقة الخاصة بنا مثل هذا بدلاً من ذلك:

@keyframes m {
  0% { transform: rotate(0); }
  @for $i from 1 to $n {
    #{($i / $n) * 100}% { transform: rotate(#{($i / $n) * -360}deg); }  
  }
  100% { transform: rotate(-360deg); }
}

منذ كل صورة تأخذ 5% من الرسوم المتحركة ، نقوم بتغيير هذا:

#{($i / $n) * 100}%

…مع هذا:

#{($i / $n) * 100 - 2}%, #{($i / $n) * 100 + 3}%

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

@keyframes m {
  0%,3% { transform: rotate(0); }
  @for $i from 1 to $n {
    #{($i / $n) * 100 - 2}%, #{($i / $n) * 100 + 3}% { transform: rotate(#{($i / $n) * -360}deg); }  
  }
  98%,100% { transform: rotate(-360deg); }
}

آخر بت هو التحديث transform-origin. سنحتاج إلى بعض الحيل الهندسية. مهما كان عدد الصور ، فإن التكوين هو نفسه دائمًا. لدينا صورنا (دوائر صغيرة) موضوعة داخل دائرة كبيرة ونحتاج إلى إيجاد قيمة نصف القطر ، R.

ربما لا تريد تفسيرًا هندسيًا مملًا ، فإليك الطريقة التي نجدها R:

R = S / (2 * sin(180deg / N))

إذا عبرنا عن ذلك كنسبة مئوية ، فهذا يعطينا:

R = 100% / (2 * sin(180deg / N)) = 50% / sin(180deg / N)

… وهو ما يعني transform-origin القيمة تساوي:

transform-origin: 50% (50% / math.sin(180deg / $n) + 50%);

لقد انتهينا! لدينا شريط تمرير يعمل مع أي عدد من الصور!

دعونا نرمي تسع صور هناك:

أضف العديد من الصور كما تريد وقم بتحديث ملف $n متغير مع العدد الإجمالي للصور.

اختتام

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