‏ساخت چرخانندهٔ کلمه فقط با CSS

نویسنده توضیح می‌ده که چرخانندهٔ کلمه (word rotator) یه رابط کاربریه که یه لیست از پیش تعیین‌شده از کلمه‌ها یا عبارت‌ها رو داخل یه جملهٔ ثابت می‌چرخونه؛ همون چیزی که برای ساختن تگ‌لاین‌های پویا و بنرهای خلاقانه به کار می‌ره. نکتهٔ مقاله اینه که کل این افکت رو می‌شه فقط با @counter-style و بدون جاوااسکریپت ساخت.

اولین قدم اینه که کلمه‌ها رو شبیه یه آرایه توی توصیفگر symbols نگه می‌داریم و بعد بر اساس ایندکس بهشون دسترسی می‌گیریم. سیستمی که این کارو می‌کنه cyclic ـه؛ یعنی سمبل‌ها رو پشت سر هم پیمایش می‌کنه و وقتی به آخری رسید، خودکار از اول لیست شروع می‌کنه:

@counter-style words {
  system: cyclic;
  symbols: startups enterprises nonprofits educators visionaries;
}

به گفتهٔ نویسنده، توی جاوااسکریپت برای پیمایش آرایه از حلقهٔ for و یه عدد به عنوان ایندکس استفاده می‌کنیم؛ اینجا هم دقیقاً همین کارو می‌کنیم، منتها یه شمارنده رو زیاد می‌کنیم. برای داشتن یه عدد قابل‌افزایش، یه custom property ثبت‌شده از نوع integer با @property تعریف می‌کنیم. بعد توی pseudo-element مربوط به چرخاننده، counter-reset رو با مقدار --i ست می‌کنیم و counter(i, words) کلمهٔ متناظر اون شماره رو می‌گیره؛ درست مثل words[i] توی آرایه.

قسمت اصلی ماجرا، خود حلقه‌ست که با انیمیشن ساخته می‌شه. مقدار اولیهٔ --i یک بود؛ مقدار نهاییش رو برابر تعداد کل کلمه‌ها به‌علاوهٔ یک می‌ذاریم تا همهٔ کلمه‌ها پیمایش بشن. نکتهٔ کلیدی اینه که چون --i یه custom property ثبت‌شده‌ست، می‌شه روش transition گذاشت و مرورگر مقدارش رو نرم بین این دو عدد حرکت می‌ده:

main:hover #rotator::after {
  --i: 6;
  transition: --i 3s linear;
}

نویسنده می‌گه برای این که عوض شدن کلمه‌ها قشنگ‌تر بشه، می‌شه با @keyframes یه افکت کوچیک و بزرگ شدن (scale صفر و یک) به کلمه‌ها اضافه کرد، طوری که هر کلمه وسط بازهٔ نمایشش ظاهر بشه. حساب بازه‌ها هم ساده‌ست: ۱۰۰ تقسیم بر ۶ تقریباً می‌شه ۱۷، و چهار بازهٔ میانی (به جز اولی و آخری) همون جاهایی هستن که کلمه‌ها رشد و کوچیک می‌شن.

همین ایده رو می‌شه برای افکت‌های دیگه هم به کار برد. مثلاً با سیستم alphabetic یا numeric و یه مقدار بزرگ برای --i می‌شه یه دنبالهٔ به‌هم‌ریختهٔ شبه‌تصادفی شبیه افکت متن رمزنگاری‌شده ساخت و آخرش با allow-discrete کلمهٔ نهایی رو نشون داد. سیستم additive هم که مبتنی بر ارزش علامت‌هاست، اگه شمارش از تعداد سمبل‌ها بیشتر نشه، تقریباً مثل cyclic رفتار می‌کنه. جمع‌بندی نویسنده اینه که @counter-style ابزار خوبیه برای ساختن دنباله‌ای از کاراکترها و انیمیشن CSS هم همون چیزیه که این حلقه رو می‌چرخونه.

نکات کلیدی:

• چرخانندهٔ کلمه رو می‌شه کامل با @counter-style و بدون جاوااسکریپت ساخت
• سیستم cyclic کلمه‌های توی symbols رو مثل آرایه پیمایش می‌کنه و آخرش از اول شروع می‌کنه
• یه custom property ثبت‌شده از نوع integer با @property نقش شمارنده/ایندکس رو بازی می‌کنه
• چون اون custom property قابل transition ـه، انیمیشن CSS مقدارش رو نرم حرکت می‌ده و حلقه می‌سازه
• با @keyframes می‌شه افکت کوچیک و بزرگ شدن به تعویض کلمه‌ها اضافه کرد