‏انیمیشن اسکرول با CSS خالص!

یکی از بهترین راه‌ها برای زنده‌کردن یه سایت، انیمیشن‌هاییه که وقتی اسکرول می‌کنی اجرا می‌شن. تا همین اواخر، برای این کار حتماً باید از جاوااسکریپت استفاده می‌کردی. ولی حالا یه API جدید به اسم Animation Timeline اومده که این قابلیت رو مستقیم به CSS اضافه کرده و دیگه نیازی به JS نداری.

ایده مرکزی این APIه خیلی ساده‌ست: توی CSS، انیمیشن‌های keyframe معمولاً بر اساس زمان اجرا می‌شن. یعنی از ۰٪ تا ۱۰۰٪ در یه بازه زمانی مشخص. این API می‌گه خب، چرا این ۰٪ تا ۱۰۰٪ حتماً باید زمان باشه؟ می‌شه اونو به موقعیت اسکرول یه المان توی viewport وصل کرد! با اینکار، وقتی کاربر اسکرول می‌کنه، انیمیشن هم پیش می‌ره.

برای استفاده از این قابلیت، فقط کافیه یه پراپرتی جدید به اسم animation-timeline به المان موردنظرت اضافه کنی. مثلاً با مقدار view() بهش می‌گی که پیشرفت انیمیشن رو بر اساس موقعیت المان توی viewport حساب کن. دیگه نیازی به نوشتن event listener یا محاسبه دستی scroll position نیست.

یکی از قابلیت‌های جالب اینه که می‌تونی easing و timing function هم روی این انیمیشن‌ها اعمال کنی، دقیقاً مثل انیمیشن‌های معمولی. می‌خوای یه چرخش با ease-out داشته باشی؟ می‌خوای از cubic-bezier یا حتی linear() برای افکت‌های فنری استفاده کنی؟ همه اینا کار می‌کنن.

یه چیز مهم دیگه animation-range هست که بهت اجازه می‌ده دقیقاً تعریف کنی که انیمیشن از کجا شروع و کجا تموم بشه. مقدار پیش‌فرض cover یعنی انیمیشن از لحظه‌ای شروع می‌شه که اولین پیکسل المان وارد viewport می‌شه. مقدار contain می‌گه صبر کن تا المان کاملاً توی viewport باشه، بعد شروع کن. این برای انیمیشن‌هایی که می‌خوای کامل دیده بشن خیلی مفیده.

علاوه بر cover و contain، دو مقدار دیگه هم داری: entry که فقط وقتی المان داره وارد viewport می‌شه انیمیشن رو اجرا می‌کنه، و exit که فقط موقع خروج. این یعنی می‌تونی انیمیشن‌های slide-in یا fade-out خیلی دقیق و کنترل‌شده بسازی. یه نکته مهم هم اینه که اگه از animation-range: contain استفاده می‌کنی، بهتره animation-fill-mode: backwards هم تنظیم کنی تا حالت اولیه انیمیشن قبل از شروع محدوده هم اعمال بشه.

این API همچنین از scroll progress timelines پشتیبانی می‌کنه که بهت اجازه می‌ده انیمیشن رو به اسکرول کل صفحه یا یه عنصر خاص وصل کنی، نه فقط موقعیت یه المان خاص. به علاوه linked timelines هم هستن که می‌تونی از CSS اسم‌گذاری‌شده برای اتصال انیمیشن‌های مختلف به یه اسکرول مشترک استفاده کنی.

از نظر پشتیبانی، این API الان حدود ۸۵٪ مرورگرها رو پوشش می‌ده. همه مرورگرهای اصلی بجز فایرفاکس ساپورتش می‌کنن، ولی فایرفاکس هم پیاده‌سازیش رو کامل کرده و فقط پشت یه فلگ قرار داره. توی Firefox Nightly الان به صورت پیش‌فرض فعاله و احتمالاً به زودی به نسخه stable هم می‌رسه. یه polyfill هم وجود داره، هرچند برای قابلیت‌های پیشرفته‌تر مثل linked timelines خوب کار نمی‌کنه.

نکات کلیدی:

• با پراپرتی animation-timeline: view() می‌تونی انیمیشن‌های keyframe رو به اسکرول وصل کنی، بدون یه خط جاوااسکریپت
• تمام قابلیت‌های آشنای keyframe animations مثل easing و cubic-bezier اینجا هم کار می‌کنن
• animation-range بهت کنترل می‌ده که انیمیشن دقیقاً کِی شروع و تموم بشه (cover، contain، entry، exit)
• اگه از contain استفاده می‌کنی، فراموش نکنی animation-fill-mode: backwards رو هم تنظیم کنی
• پشتیبانی مرورگری حدود ۸۵٪ه و فایرفاکس هم داره بهش می‌رسه
• این API روی ساختار موجود CSS ساخته شده، یعنی اگه keyframe animations بلدی، خیلی سریع یادش می‌گیری