‏چرخش کلمات فقط با CSS و @counter-style

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

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

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

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

#rotator::after {
  counter-reset: i calc(var(--i));
  content: counter(i, words);
}

حالا برای راه‌انداختن حلقه، مقدار --i با یه transition بالا می‌ره. تو این مثال موقع :hover مقدار --i تو ۳ ثانیه از ۱ به ۶ می‌رسه و چون مقدار نهایی یکی بیشتر از تعداد کلمات گذاشته شده، همه‌ی کلمات یه دور کامل می‌چرخن و آخرش به اولین کلمه برمی‌گرده. نویسنده برای قشنگ‌تر شدن تغییر کلمات هم یه انیمیشن keyframe اضافه می‌کنه که موقع عوض شدن هر کلمه یه افکت کوچیک‌شدن و بزرگ‌شدن می‌ده؛ منطق درصدهای keyframe هم از تقسیم ۱۰۰ بر ۶ (تعداد بازه‌ها) درمیاد.

تو ادامه نویسنده سراغ سیستم‌های دیگه می‌ره: با alphabetic و numeric می‌شه یه افکت شبه‌تصادفی و درهم مثل متن رمزی (cipher) ساخت که هرچی مقدار --i بزرگ‌تر باشه، دنباله‌ی به‌هم‌ریخته‌تری تولید می‌کنه. سیستم additive هم برخلاف بقیه مبتنی بر مقدارِ علامت‌هاست؛ به هر symbol یه مقدار اعشاری می‌دی و خروجی، دنباله‌ای از symbolهاست که جمع مقدارشون با شمارنده برابر می‌شه. نتیجه‌گیری مقاله اینه که @counter-style ابزار خوبی برای ساختن دنباله‌ای از کاراکترهاست و انیمیشن CSS با چرخوندن یه شمارنده، symbol مناسب رو از داخل اون قاعده انتخاب و افکت‌های متحرک رو می‌سازه.

نکات کلیدی:

• یه word rotator کامل فقط با @counter-style و CSS، بدون جاوااسکریپت، ساخته می‌شه
• کلمات تو دیسکریپتور symbols نگه داشته می‌شن و سیستم cyclic توشون حلقه می‌زنه
• یه custom property از نوع integer با @property نقش ایندکس آرایه رو بازی می‌کنه
• با counter(i, words) کلمه‌ی متناظر شمارنده گرفته می‌شه، شبیه words[i]
• سیستم‌های alphabetic/numeric افکت متن درهم و additive چرخش مبتنی بر مجموع مقدارها رو می‌سازن