تسلط بر محدوده انیمیشن CSS: مرزهای دقیق انیمیشن‌های مبتنی بر اسکرول

در دنیای پویای توسعه وب، تجربه کاربری حرف اول را می‌زند. رابط‌های کاربری تعاملی و جذاب دیگر یک مزیت لوکس نیستند؛ بلکه یک انتظار هستند. سال‌ها، ساخت انیمیشن‌های پیچیده مبتنی بر اسکرول – جایی که عناصر به صورت پویا به اقدامات اسکرول کاربر پاسخ می‌دهند – اغلب نیازمند اتکا به کتابخانه‌های پیچیده جاوا اسکریپت بود. این راه‌حل‌ها، هرچند قدرتمند، گاهی اوقات باعث سربار عملکردی و افزایش پیچیدگی توسعه می‌شدند.

اینجاست که محدوده انیمیشن CSS (CSS Animation Range) وارد می‌شود، یک افزودنی پیشگامانه به ماژول انیمیشن‌های مبتنی بر اسکرول CSS. این ویژگی انقلابی به توسعه‌دهندگان این امکان را می‌دهد که مرزهای دقیقی را برای زمان شروع و پایان یک انیمیشن در یک تایم‌لاین اسکرول مشخص، مستقیماً در CSS تعریف کنند. این یک روش اعلانی، کارآمد و زیبا برای جان بخشیدن به طراحی‌های وب شماست که کنترل دقیقی بر افکت‌های اسکرول ارائه می‌دهد که قبلاً با CSS بومی به تنهایی دشوار یا غیرممکن بود.

این راهنمای جامع به طور عمیق به پیچیدگی‌های محدوده انیمیشن CSS می‌پردازد. ما مفاهیم اصلی آن را بررسی خواهیم کرد، ویژگی‌های آن را تشریح می‌کنیم، کاربردهای عملی را نشان می‌دهیم، تکنیک‌های پیشرفته را مورد بحث قرار می‌دهیم و بهترین شیوه‌ها را برای ادغام یکپارچه آن در پروژه‌های وب جهانی شما ارائه می‌دهیم. در پایان، شما برای استفاده از این ابزار قدرتمند برای ایجاد تجربیات واقعاً جذاب و کارآمد مبتنی بر اسکرول برای کاربران در سراسر جهان مجهز خواهید شد.

درک مفاهیم اصلی انیمیشن‌های مبتنی بر اسکرول

قبل از اینکه به تشریح animation-range بپردازیم، درک زمینه گسترده‌تر انیمیشن‌های مبتنی بر اسکرول CSS و مشکلاتی که حل می‌کنند، حیاتی است.

تکامل انیمیشن‌های مبتنی بر اسکرول

از لحاظ تاریخی، دستیابی به افکت‌های مرتبط با اسکرول در وب مستلزم مقدار قابل توجهی جاوا اسکریپت بود. کتابخانه‌هایی مانند ScrollTrigger از GSAP، ScrollMagic یا حتی پیاده‌سازی‌های سفارشی Intersection Observer به ابزارهای ضروری برای توسعه‌دهندگان تبدیل شدند. در حالی که این کتابخانه‌ها انعطاف‌پذیری فوق‌العاده‌ای ارائه می‌دادند، با معایب خاصی همراه بودند:

• عملکرد: راه‌حل‌های مبتنی بر جاوا اسکریپت، به ویژه آن‌هایی که به طور مکرر موقعیت‌ها را هنگام اسکرول دوباره محاسبه می‌کنند، گاهی اوقات می‌توانند منجر به لگ یا انیمیشن‌های غیر روان شوند، به خصوص در دستگاه‌های ضعیف‌تر یا صفحات پیچیده.
• پیچیدگی: ادغام و مدیریت این کتابخانه‌ها لایه‌های اضافی کد را اضافه می‌کرد که منحنی یادگیری و احتمال بروز باگ را افزایش می‌داد.
• اعلانی در مقابل دستوری: جاوا اسکریپت اغلب به یک رویکرد دستوری نیاز دارد ("این کار را وقتی آن اتفاق افتاد انجام بده")، در حالی که CSS ذاتاً یک سبک اعلانی ارائه می‌دهد ("این عنصر باید تحت این شرایط اینگونه به نظر برسد"). راه‌حل‌های بومی CSS با رویکرد دوم هماهنگی بیشتری دارند.

ظهور انیمیشن‌های مبتنی بر اسکرول CSS نشان‌دهنده یک تغییر قابل توجه به سمت رویکردی بومی‌تر، کارآمدتر و اعلانی‌تر است. با واگذاری این انیمیشن‌ها به موتور رندر مرورگر، توسعه‌دهندگان می‌توانند با کد کمتر به افکت‌های روان‌تری دست یابند.

معرفی animation-timeline

اساس انیمیشن‌های مبتنی بر اسکرول CSS در ویژگی animation-timeline نهفته است. به جای یک مدت زمان ثابت، animation-timeline به یک انیمیشن اجازه می‌دهد تا بر اساس موقعیت اسکرول یک عنصر مشخص پیشرفت کند. این ویژگی دو تابع اصلی را می‌پذیرد:

• scroll(): این تابع یک تایم‌لاین پیشرفت اسکرول ایجاد می‌کند. شما می‌توانید مشخص کنید که موقعیت اسکرول کدام عنصر باید انیمیشن را هدایت کند. به عنوان مثال، scroll(root) به کانتینر اسکرول اصلی سند اشاره دارد، در حالی که scroll(self) به خود عنصر اشاره دارد اگر قابل اسکرول باشد. این تایم‌لاین پیشرفت را از ابتدا (0%) تا انتهای (100%) ناحیه قابل اسکرول ردیابی می‌کند.
• view(): این تابع یک تایم‌لاین پیشرفت نمایش (view) ایجاد می‌کند. برخلاف scroll() که کل محدوده قابل اسکرول را ردیابی می‌کند، view() قابلیت مشاهده یک عنصر را در داخل کانتینر اسکرول آن (معمولاً viewport) ردیابی می‌کند. انیمیشن با ورود، عبور و خروج عنصر از نما پیشرفت می‌کند. همچنین می‌توانید axis (block یا inline) و target (مثلاً cover، contain، entry، exit) را مشخص کنید.

در حالی که animation-timeline تعیین می‌کند چه چیزی انیمیشن را هدایت می‌کند، مشخص نمی‌کند که چه زمانی در آن تایم‌لاین مبتنی بر اسکرول، انیمیشن باید واقعاً اجرا شود. اینجاست که animation-range ضروری می‌شود.

animation-range چیست؟

در اصل، animation-range به شما اجازه می‌دهد تا بخش خاصی از یک تایم‌لاین اسکرول را تعریف کنید که انیمیشن CSS شما در آن اجرا شود. یک تایم‌لاین اسکرول را به عنوان یک مسیر از 0% تا 100% در نظر بگیرید. بدون animation-range، یک انیمیشن متصل به تایم‌لاین اسکرول معمولاً در کل محدوده 0-100% آن تایم‌لاین اجرا می‌شود.

اما، اگر بخواهید یک عنصر فقط هنگام ورود به viewport محو شود (مثلاً از 20% قابل مشاهده تا 80% قابل مشاهده) چه؟ یا شاید بخواهید یک تبدیل پیچیده فقط زمانی رخ دهد که کاربر از یک بخش خاص عبور می‌کند و سپس با اسکرول به عقب برعکس شود؟

animation-range این کنترل دقیق را فراهم می‌کند. این ویژگی در کنار animation-timeline و تعاریف @keyframes شما کار می‌کند تا هماهنگی دقیقی از افکت‌ها را ارائه دهد. این اساساً یک جفت مقدار است – یک نقطه شروع و یک نقطه پایان – که بخش فعال تایم‌لاین اسکرول را برای یک انیمیشن مشخص تعیین می‌کند.

این را با animation-duration در انیمیشن‌های سنتی مبتنی بر زمان مقایسه کنید. animation-duration تعیین می‌کند که یک انیمیشن چقدر طول می‌کشد. با انیمیشن‌های مبتنی بر اسکرول، "مدت زمان" به طور موثر با مقدار اسکرول مورد نیاز برای پیمودن animation-range تعریف شده تعیین می‌شود. هرچه اسکرول سریع‌تر باشد، انیمیشن سریع‌تر در محدوده خود اجرا می‌شود.

بررسی عمیق ویژگی‌های animation-range

ویژگی animation-range یک خلاصه برای animation-range-start و animation-range-end است. بیایید هر کدام را به تفصیل، همراه با مجموعه قدرتمند مقادیر پذیرفته شده آنها، بررسی کنیم.

animation-range-start و animation-range-end

این ویژگی‌ها نقاط شروع و پایان محدوده فعال انیمیشن را در تایم‌لاین اسکرول مرتبط با آن تعریف می‌کنند. آنها می‌توانند به صورت جداگانه یا با استفاده از خلاصه animation-range مشخص شوند.

• animation-range-start: نقطه‌ای در تایم‌لاین اسکرول را تعریف می‌کند که انیمیشن باید از آنجا شروع شود.
• animation-range-end: نقطه‌ای در تایم‌لاین اسکرول را تعریف می‌کند که انیمیشن باید در آنجا به پایان برسد.

مقادیر ارائه شده به این ویژگی‌ها نسبت به animation-timeline انتخاب شده هستند. برای یک تایم‌لاین scroll()، این معمولاً به پیشرفت اسکرول کانتینر اشاره دارد. برای یک تایم‌لاین view()، به ورود/خروج عنصر از viewport اشاره دارد.

خلاصه animation-range

ویژگی خلاصه به شما امکان می‌دهد تا هر دو نقطه شروع و پایان را به صورت مختصر تنظیم کنید:

.element {\n  animation-range: <start-value> [ <end-value> ];\n}

اگر فقط یک مقدار ارائه شود، هر دو animation-range-start و animation-range-end را روی همان مقدار تنظیم می‌کند، به این معنی که انیمیشن به صورت آنی در آن نقطه اجرا می‌شود (اگرچه معمولاً برای انیمیشن‌های پیوسته مفید نیست).

مقادیر پذیرفته شده برای animation-range

اینجاست که animation-range واقعاً می‌درخشد و مجموعه غنی از کلمات کلیدی و اندازه‌گیری‌های دقیق را ارائه می‌دهد:

۱. درصدها (مانند 20%, 80%)

درصدها نقاط شروع و پایان انیمیشن را به عنوان درصدی از طول کل تایم‌لاین اسکرول تعریف می‌کنند. این به ویژه برای تایم‌لاین‌های scroll() بصری است.

• مثال: انیمیشنی که یک عنصر را با اسکرول کاربر در بخش میانی صفحه محو می‌کند.

.fade-in-middle {\n  animation: fadeIn 1s linear forwards;\n  animation-timeline: scroll(root);\n  animation-range: 30% 70%; /* در 30% اسکرول شروع و در 70% اسکرول پایان می‌یابد */\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; transform: translateY(20px); }\n  to { opacity: 1; transform: translateY(0); }\n}

در این مثال، انیمیشن fadeIn فقط زمانی اجرا می‌شود که موقعیت اسکرول کانتینر اصلی بین 30% تا 70% از کل ارتفاع قابل اسکرول آن باشد. اگر کاربر سریع‌تر اسکرول کند، انیمیشن در آن محدوده سریع‌تر کامل می‌شود؛ اگر کندتر اسکرول کند، به تدریج‌تر اجرا می‌شود.

۲. طول‌ها (مانند 200px, 10em)

طول‌ها نقاط شروع و پایان انیمیشن را به عنوان یک فاصله مطلق در طول تایم‌لاین اسکرول تعریف می‌کنند. این برای اسکرول عمومی صفحه کمتر استفاده می‌شود اما می‌تواند برای انیمیشن‌های مرتبط با موقعیت‌های خاص عنصر یا هنگام کار با کانتینرهای اسکرول با اندازه ثابت مفید باشد.

• مثال: انیمیشنی روی یک گالری تصاویر با اسکرول افقی که در 500 پیکسل اول اسکرول اجرا می‌شود.

.gallery-caption {\n  animation: slideCaption 1s linear forwards;\n  animation-timeline: scroll(self horizontal);\n  animation-range: 0px 500px;\n}\n\n@keyframes slideCaption {\n  from { transform: translateX(100px); opacity: 0; }\n  to { transform: translateX(0); opacity: 1; }\n}

۳. کلمات کلیدی برای تایم‌لاین‌های view()

این کلمات کلیدی به طور خاص هنگام استفاده با تایم‌لاین view() قدرتمند هستند و کنترل دقیقی بر رفتار یک انیمیشن هنگام ورود یا خروج عنصر از viewport یا کانتینر اسکرول فراهم می‌کنند.

• entry: محدوده انیمیشن زمانی شروع می‌شود که مرز پورت اسکرول عنصر از نقطه entry بلوک حاوی خود عبور کند. این معمولاً به این معنی است که اولین لبه عنصر شروع به ظاهر شدن در viewport می‌کند.
• exit: محدوده انیمیشن زمانی پایان می‌یابد که مرز پورت اسکرول عنصر از نقطه exit بلوک حاوی خود عبور کند. این معمولاً به این معنی است که آخرین لبه عنصر از viewport ناپدید می‌شود.
• cover: انیمیشن در تمام مدتی که عنصر کانتینر اسکرول یا viewport خود را *پوشش می‌دهد* اجرا می‌شود. این انیمیشن زمانی شروع می‌شود که لبه جلویی عنصر وارد پورت اسکرول می‌شود و زمانی که لبه عقبی آن خارج می‌شود، پایان می‌یابد. این اغلب رفتار پیش‌فرض یا بصری‌ترین رفتار برای یک انیمیشن عنصر در نما است.
• contain: انیمیشن زمانی اجرا می‌شود که عنصر *کاملاً در داخل* کانتینر اسکرول/viewport خود قرار دارد. این انیمیشن زمانی شروع می‌شود که عنصر کاملاً قابل مشاهده است و زمانی که هر بخشی از آن شروع به خروج می‌کند، پایان می‌یابد.
• start: شبیه به entry، اما به طور خاص به لبه شروع پورت اسکرول نسبت به عنصر اشاره دارد.
• end: شبیه به exit، اما به طور خاص به لبه پایان پورت اسکرول نسبت به عنصر اشاره دارد.

این کلمات کلیدی همچنین می‌توانند با یک آفست طول یا درصد ترکیب شوند و کنترل دقیق‌تری را فراهم کنند. به عنوان مثال، entry 20% به این معنی است که انیمیشن زمانی شروع می‌شود که عنصر 20% وارد viewport شده باشد.

• مثال: یک نوار ناوبری چسبنده که با "پوشش دادن" بخش هیرو تغییر رنگ می‌دهد.

.hero-section {\n  height: 500px;\n  /* ... سایر استایل‌ها ... */\n}\n\n.sticky-nav {\n  position: sticky;\n  top: 0;\n  animation: navColorChange 1s linear forwards;\n  animation-timeline: view(); /* نسبت به نمای خودش در پورت اسکرول */\n  animation-range: cover;\n}\n\n@keyframes navColorChange {\n  0% { background-color: transparent; color: white; }\n  100% { background-color: #333; color: gold; }\n}

در این سناریو، همانطور که عنصر .sticky-nav (یا عنصری که تایم‌لاین view() به آن متصل است) viewport را پوشش می‌دهد، انیمیشن navColorChange پیشرفت می‌کند.

• مثال: تصویری که با ورود به viewport به طور نامحسوس بزرگ می‌شود و سپس با خروج از آن دوباره کوچک می‌شود.

.image-wrapper {\n  animation: scaleOnView 1s linear forwards;\n  animation-timeline: view();\n  animation-range: entry 20% cover 80%; /* زمانی شروع می‌شود که 20% عنصر قابل مشاهده است و تا زمانی که 80% عنصر نما را پوشش دهد، اجرا می‌شود */\n}\n\n@keyframes scaleOnView {\n  0% { transform: scale(1); }\n  50% { transform: scale(1.05); } /* حداکثر مقیاس زمانی که تقریباً در مرکز قرار دارد */\n  100% { transform: scale(1); }\n}

این نشان می‌دهد که چگونه animation-range می‌تواند بخش‌هایی از تایم‌لاین view() را به مراحل مختلف یک انیمیشن @keyframes نگاشت کند.

۴. normal (پیش‌فرض)

کلمه کلیدی normal مقدار پیش‌فرض برای animation-range است. این نشان می‌دهد که انیمیشن باید در تمام طول تایم‌لاین اسکرول انتخاب شده (0% تا 100%) اجرا شود.

در حالی که اغلب مناسب است، normal ممکن است زمان‌بندی دقیق مورد نیاز برای افکت‌های پیچیده را فراهم نکند، که دقیقاً به همین دلیل animation-range کنترل دقیق‌تری را ارائه می‌دهد.

کاربردهای عملی و موارد استفاده

قدرت animation-range در توانایی آن برای جان بخشیدن به افکت‌های اسکرول پیچیده و تعاملی با حداقل تلاش و حداکثر عملکرد نهفته است. بیایید برخی از موارد استفاده جذاب را که می‌توانند تجربه کاربری را در مقیاس جهانی، از سایت‌های تجارت الکترونیک گرفته تا پلتفرم‌های آموزشی، بهبود بخشند، بررسی کنیم.

افکت‌های اسکرول پارالاکس

پارالاکس، جایی که محتوای پس‌زمینه با سرعتی متفاوت از محتوای پیش‌زمینه حرکت می‌کند، توهم عمق ایجاد می‌کند. به طور سنتی، این یک کاندیدای اصلی برای جاوا اسکریپت بود. با animation-range، این کار بسیار ساده‌تر می‌شود.

یک وب‌سایت مسافرتی را تصور کنید که مقاصد را به نمایش می‌گذارد. با اسکرول کاربر، یک تصویر پس‌زمینه از خط افق یک شهر می‌تواند به آرامی جابجا شود، در حالی که عناصر پیش‌زمینه مانند متن یا دکمه‌ها با سرعت عادی حرکت می‌کنند. با تعریف یک تایم‌لاین scroll(root) و اعمال یک انیمیشن transform: translateY() با یک animation-range تعریف شده، می‌توانید به پارالاکس روان بدون محاسبات پیچیده دست یابید.

.parallax-background {\n  animation: moveBackground var(--parallax-speed) linear forwards;\n  animation-timeline: scroll(root);\n  animation-range: 0% 100%; /* یا یک محدوده بخش خاص */\n}\n\n@keyframes moveBackground {\n  from { transform: translateY(0); }\n  to { transform: translateY(-100px); } /* در طول کل اسکرول 100 پیکسل به بالا حرکت می‌کند */\n}

animation-range تضمین می‌کند که افکت پارالاکس با اسکرول کلی سند همگام‌سازی شده و تجربه‌ای روان و فراگیر را فراهم می‌کند.

انیمیشن‌های نمایش عناصر

یک الگوی رایج در رابط کاربری، نمایش عناصر (محو شدن، بالا آمدن، باز شدن) هنگام ورود به viewport کاربر است. این کار توجه را به محتوای جدید جلب کرده و حس پیشرفت ایجاد می‌کند.

یک پلتفرم دوره آنلاین را در نظر بگیرید: با اسکرول کاربر در یک درس، هر عنوان بخش جدید یا تصویر می‌تواند به آرامی محو شده و به داخل نما بلغزد. با استفاده از animation-timeline: view() به همراه animation-range: entry 0% cover 50%، می‌توانید تعیین کنید که یک عنصر از حالت کاملاً شفاف به کاملاً مات محو شود، همانطور که وارد viewport شده و به نقطه میانی خود می‌رسد.

.reveal-item {\n  opacity: 0;\n  transform: translateY(50px);\n  animation: revealItem 1s linear forwards;\n  animation-timeline: view();\n  animation-range: entry 10% cover 50%; /* وقتی 10% قابل مشاهده است شروع می‌شود، وقتی 50% قابل مشاهده است تمام می‌شود */\n}\n\n@keyframes revealItem {\n  to { opacity: 1; transform: translateY(0); }\n}

این رویکرد باعث می‌شود بارگذاری محتوا پویاتر و جذاب‌تر به نظر برسد، چه توضیحات محصول در یک سایت تجارت الکترونیک باشد و چه بخش یک پست وبلاگ در یک پورتال خبری.

نشانگرهای پیشرفت

برای مقالات طولانی، راهنماهای کاربری، یا فرم‌های چند مرحله‌ای، یک نشانگر پیشرفت می‌تواند با نشان دادن موقعیت کاربران و مقدار باقی‌مانده، قابلیت استفاده را به طور قابل توجهی افزایش دهد. یک الگوی رایج، نوار پیشرفت خواندن در بالای viewport است.

می‌توانید یک نوار باریک در بالای صفحه ایجاد کرده و عرض آن را به پیشرفت اسکرول سند پیوند دهید. با animation-timeline: scroll(root) و animation-range: 0% 100%، عرض نوار می‌تواند از 0% به 100% با اسکرول کاربر از بالا به پایین صفحه افزایش یابد.

.progress-bar {\n  position: fixed;\n  top: 0; left: 0;\n  height: 5px;\n  background-color: #007bff;\n  width: 0%; /* حالت اولیه */\n  animation: fillProgress 1s linear forwards;\n  animation-timeline: scroll(root);\n  animation-range: 0% 100%;\n  z-index: 1000;\n}\n\n@keyframes fillProgress {\n  to { width: 100%; }\n}

این یک نشانه بصری واضح فراهم می‌کند که ناوبری را بهبود بخشیده و ناامیدی کاربر را در صفحات پرمحتوا کاهش می‌دهد، که یک ویژگی ارزشمند برای مصرف محتوای جهانی است.

انیمیشن‌های چند مرحله‌ای پیچیده

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

یک صفحه "تاریخچه شرکت ما" را تصور کنید. با اسکرول کاربر، از بخش‌های "نقاط عطف" عبور می‌کند. هر نقطه عطف می‌تواند یک انیمیشن منحصر به فرد را فعال کند:

• نقطه عطف ۱: یک گرافیک می‌چرخد و بزرگ می‌شود (animation-range: 10% 20%)
• نقطه عطف ۲: یک عنصر تایم‌لاین از کنار وارد می‌شود (animation-range: 30% 40%)
• نقطه عطف ۳: یک حباب نقل قول ظاهر می‌شود (animation-range: 50% 60%)

با تعریف دقیق محدوده‌ها، می‌توانید یک تجربه روایی منسجم و تعاملی ایجاد کنید و توجه کاربر را از طریق قطعات مختلف محتوا هنگام اسکرول هدایت کنید.

.milestone-1-graphic {\n  animation: rotateExpand 1s linear forwards;\n  animation-timeline: scroll(root);\n  animation-range: 10% 20%;\n}\n.milestone-2-timeline {\n  animation: slideIn 1s linear forwards;\n  animation-timeline: scroll(root);\n  animation-range: 30% 40%;\n}\n/* ... و غیره ... */\n

این سطح از کنترل امکان تجربیات داستان‌سرایی بسیار سفارشی و برند شده را فراهم می‌کند که در میان مخاطبان متنوع طنین‌انداز می‌شود.

داستان‌سرایی تعاملی

فراتر از نمایش‌های ساده، animation-range روایت‌های غنی و تعاملی را که اغلب در صفحات فرود محصول یا محتوای تحریریه دیده می‌شود، تسهیل می‌کند. عناصر می‌توانند با اسکرول کاربر در یک داستان، بزرگ، کوچک، تغییر رنگ یا حتی به اشکال مختلف تبدیل شوند.

یک صفحه معرفی محصول را در نظر بگیرید. با اسکرول کاربر به پایین، یک تصویر محصول ممکن است به آرامی بچرخد تا زوایای مختلف را نشان دهد، در حالی که متن ویژگی‌ها در کنار آن محو می‌شود. این رویکرد لایه‌ای کاربران را درگیر نگه می‌دارد و روشی پویا برای ارائه اطلاعات بدون نیاز به یک ویدیوی کامل فراهم می‌کند.

کنترل دقیقی که animation-range ارائه می‌دهد به طراحان و توسعه‌دهندگان اجازه می‌دهد تا این تجربیات را دقیقاً همانطور که در نظر گرفته شده است، طراحی کنند و جریانی روان و هدفمند را برای کاربر، صرف نظر از سرعت اسکرول آنها، تضمین کنند.

راه‌اندازی انیمیشن‌های مبتنی بر اسکرول شما

پیاده‌سازی انیمیشن‌های مبتنی بر اسکرول CSS با animation-range شامل چند مرحله کلیدی است. بیایید اجزای ضروری را مرور کنیم.

بازبینی تایم‌لاین‌های scroll() و view()

اولین تصمیم شما این است که انیمیشن خود را به کدام تایم‌لاین اسکرول متصل کنید:

• scroll(): این برای انیمیشن‌هایی ایده‌آل است که به اسکرول کلی سند یا اسکرول یک کانتینر خاص پاسخ می‌دهند.
• سینتکس: scroll([<scroller-name> || <axis>]?)
  به عنوان مثال، scroll(root) برای اسکرول اصلی سند، scroll(self) برای کانتینر اسکرول خود عنصر، یا scroll(my-element-id y) برای اسکرول عمودی یک عنصر سفارشی.
• view(): این برای انیمیشن‌هایی که با دیده‌شدن یک عنصر در کانتینر اسکرول آن (معمولاً viewport) فعال می‌شوند، بهترین است.
• سینتکس: view([<axis> || <view-timeline-name>]?)
  به عنوان مثال، view() برای تایم‌لاین پیش‌فرض viewport، یا view(block) برای انیمیشن‌های مرتبط با دیده‌شدن در محور بلوک. همچنین می‌توانید با استفاده از view-timeline-name روی والد/جد، یک تایم‌لاین نما را نام‌گذاری کنید.

نکته مهم این است که animation-timeline باید روی عنصری که می‌خواهید انیمیشن داده شود اعمال شود، نه لزوماً روی خود کانتینر اسکرول (مگر اینکه آن عنصر خود کانتینر اسکرول باشد).

تعریف انیمیشن با @keyframes

تغییرات بصری انیمیشن شما با استفاده از قوانین استاندارد @keyframes تعریف می‌شود. چیزی که متفاوت است این است که این کی‌فریم‌ها چگونه به تایم‌لاین اسکرول نگاشت می‌شوند.

وقتی یک انیمیشن به یک تایم‌لاین اسکرول مرتبط می‌شود، درصدها در @keyframes (0% تا 100%) دیگر نشان‌دهنده زمان نیستند. در عوض، آنها نشان‌دهنده پیشرفت در animation-range مشخص شده هستند. اگر animation-range شما 20% 80% باشد، آنگاه 0% در @keyframes شما با 20% از تایم‌لاین اسکرول مطابقت دارد و 100% در @keyframes شما با 80% از تایم‌لاین اسکرول مطابقت دارد.

این یک تغییر مفهومی قدرتمند است: کی‌فریم‌های شما توالی کامل انیمیشن را تعریف می‌کنند و animation-range آن توالی را بر روی یک بخش خاص اسکرول برش داده و نگاشت می‌کند.

اعمال animation-timeline و animation-range

بیایید همه چیز را با یک مثال عملی کنار هم بگذاریم: عنصری که با کاملاً قابل مشاهده شدن در viewport کمی بزرگ می‌شود و سپس با خروج از آن دوباره کوچک می‌شود.

ساختار HTML:

<div class="container">\n  <!-- محتوای زیاد برای فعال کردن اسکرول -->\n  <div class="animated-element">سلام دنیا</div>\n  <!-- محتوای بیشتر -->\n</div>

استایل‌دهی CSS:

.animated-element {\n  height: 200px;\n  width: 200px;\n  background-color: lightblue;\n  margin: 500px auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 1.5em;\n  border-radius: 10px;\n  box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n\n  /* ویژگی‌های کلیدی برای انیمیشن مبتنی بر اسکرول */\n  animation: scaleOnView 1s linear forwards;\n  animation-timeline: view(); /* انیمیشن با ورود/خروج این عنصر از نما پیشرفت می‌کند */\n  animation-range: entry 20% cover 80%; /* انیمیشن از زمانی که 20% عنصر قابل مشاهده است تا زمانی که 80% آن نما را پوشش دهد، اجرا می‌شود */\n}\n\n@keyframes scaleOnView {\n  0% { transform: scale(0.8); opacity: 0; }\n  50% { transform: scale(1.1); opacity: 1; } /* اوج مقیاس و شفافیت تقریباً در نیمه راه محدوده فعال */\n  100% { transform: scale(0.9); opacity: 1; }\n}

در این مثال:

• animation-timeline: view() تضمین می‌کند که انیمیشن توسط دیده‌شدن .animated-element در viewport هدایت می‌شود.
• animation-range: entry 20% cover 80% منطقه فعال انیمیشن را تعریف می‌کند: زمانی شروع می‌شود که عنصر 20% وارد viewport شده باشد (از لبه جلویی آن) و تا زمانی که 80% عنصر viewport را پوشش دهد (از لبه جلویی آن) اجرا می‌شود.
• @keyframes scaleOnView تبدیل را تعریف می‌کند. 0% از کی‌فریم‌ها به entry 20% از تایم‌لاین نما، 50% از کی‌فریم‌ها به نقطه میانی محدوده `entry 20%` تا `cover 80%`، و 100% به cover 80% نگاشت می‌شود.
• animation-duration: 1s و animation-fill-mode: forwards هنوز هم مرتبط هستند. مدت زمان به عنوان یک "ضریب سرعت" عمل می‌کند؛ مدت زمان طولانی‌تر باعث می‌شود انیمیشن در محدوده خود برای یک فاصله اسکرول معین کندتر به نظر برسد. forwards تضمین می‌کند که حالت نهایی انیمیشن باقی بماند.

این تنظیمات روشی فوق‌العاده قدرتمند و بصری برای کنترل انیمیشن‌های مبتنی بر اسکرول صرفاً در CSS فراهم می‌کند.

تکنیک‌های پیشرفته و ملاحظات

فراتر از اصول اولیه، animation-range به طور یکپارچه با سایر ویژگی‌های انیمیشن CSS ادغام می‌شود و نیازمند توجه به عملکرد و سازگاری است.

ترکیب animation-range با animation-duration و animation-fill-mode

در حالی که انیمیشن‌های مبتنی بر اسکرول "مدت زمان" ثابتی به معنای سنتی ندارند (زیرا به سرعت اسکرول بستگی دارد)، animation-duration هنوز نقش مهمی ایفا می‌کند. این "مدت زمان هدف" را برای انیمیشن تعریف می‌کند تا توالی کامل کی‌فریم خود را اگر با سرعت "عادی" در محدوده مشخص شده خود اجرا می‌شد، کامل کند.

• animation-duration طولانی‌تر به این معنی است که انیمیشن در محدوده animation-range داده شده کندتر به نظر می‌رسد.
• animation-duration کوتاه‌تر به این معنی است که انیمیشن در محدوده animation-range داده شده سریع‌تر به نظر می‌رسد.

animation-fill-mode نیز حیاتی باقی می‌ماند. forwards معمولاً برای اطمینان از اینکه حالت نهایی انیمیشن پس از پیمودن animation-range فعال باقی می‌ماند، استفاده می‌شود. بدون آن، عنصر ممکن است پس از خروج کاربر از محدوده تعریف شده، به حالت اولیه خود بازگردد.

به عنوان مثال، اگر می‌خواهید یک عنصر پس از ورود به viewport محو شده باقی بماند، animation-fill-mode: forwards ضروری است.

مدیریت چندین انیمیشن روی یک عنصر

شما می‌توانید چندین انیمیشن مبتنی بر اسکرول را به یک عنصر واحد اعمال کنید. این کار با ارائه لیستی از مقادیر جدا شده با کاما برای animation-name، animation-timeline، و animation-range (و سایر ویژگی‌های انیمیشن) انجام می‌شود.

به عنوان مثال، یک عنصر می‌تواند همزمان با ورود به نما محو شود و با پوشش دادن نما بچرخد:

.multi-animated-item {\n  animation-name: fadeIn, rotateItem;\n  animation-duration: 1s, 2s;\n  animation-timeline: view(), view();\n  animation-range: entry 0% cover 50%, cover;\n  animation-fill-mode: forwards, forwards;\n}\n\n@keyframes fadeIn {\n  from { opacity: 0; }\n  to { opacity: 1; }\n}\n\n@keyframes rotateItem {\n  from { transform: rotate(0deg); }\n  to { transform: rotate(360deg); }\n}

این قدرت هماهنگی دقیق را نشان می‌دهد و اجازه می‌دهد جنبه‌های مختلف ظاهر یک عنصر توسط بخش‌های مختلف تایم‌لاین اسکرول کنترل شوند.

پیامدهای عملکردی

یکی از مزایای اصلی انیمیشن‌های مبتنی بر اسکرول CSS، از جمله animation-range، مزایای عملکردی ذاتی آنهاست. با انتقال منطق پیوند اسکرول از جاوا اسکریپت به موتور رندر مرورگر:

• آف‌لود کردن ترد اصلی: انیمیشن‌ها می‌توانند روی ترد کامپوزیتور اجرا شوند و ترد اصلی جاوا اسکریپت را برای کارهای دیگر آزاد کنند، که منجر به تعاملات روان‌تر می‌شود.
• رندرینگ بهینه: مرورگرها برای انیمیشن‌ها و تبدیل‌های CSS بسیار بهینه شده‌اند و اغلب از شتاب‌دهنده GPU استفاده می‌کنند.
• کاهش لگ: اتکای کمتر به جاوا اسکریپت برای رویدادهای اسکرول می‌تواند به طور قابل توجهی "لگ" (پرش یا ناهمواری) را که هنگام بارگذاری بیش از حد شنوندگان رویداد اسکرول رخ می‌دهد، کاهش دهد.

این به معنای تجربه کاربری روان‌تر و پاسخ‌گوتر است، که به ویژه برای مخاطبان جهانی که از وب‌سایت‌ها روی طیف متنوعی از دستگاه‌ها و شرایط شبکه دسترسی دارند، حیاتی است.

سازگاری با مرورگرها

تا اواخر سال ۲۰۲۳ / اوایل ۲۰۲۴، انیمیشن‌های مبتنی بر اسکرول CSS (شامل animation-timeline و animation-range) عمدتاً در مرورگرهای مبتنی بر کرومیوم (کروم، اج، اپرا، بریو و غیره) پشتیبانی می‌شوند.

وضعیت فعلی:

• کروم: پشتیبانی کامل (از کروم ۱۱۵)
• اج: پشتیبانی کامل
• فایرفاکس: در حال توسعه / پشت فلگ‌ها
• سافاری: در حال توسعه / پشت فلگ‌ها

استراتژی‌های جایگزین (Fallback):

• کوئری‌های ویژگی (@supports): از @supports (animation-timeline: scroll()) برای اعمال انیمیشن‌های مبتنی بر اسکرول فقط در صورت پشتیبانی استفاده کنید. یک جایگزین ساده‌تر، غیر انیمیشنی یا مبتنی بر جاوا اسکریپت برای مرورگرهای پشتیبانی نشده فراهم کنید.
• بهبود تدریجی (Progressive Enhancement): محتوای خود را طوری طراحی کنید که حتی بدون این انیمیشن‌های پیشرفته کاملاً قابل دسترس و قابل درک باشد. انیمیشن‌ها باید تجربه کاربری را بهبود بخشند، نه اینکه برای آن حیاتی باشند.

با توجه به تکامل سریع استانداردهای وب، انتظار می‌رود در آینده نزدیک پشتیبانی گسترده‌تری از مرورگرها را شاهد باشیم. پیگیری منابعی مانند Can I Use... برای آخرین اطلاعات سازگاری توصیه می‌شود.

اشکال‌زدایی انیمیشن‌های مبتنی بر اسکرول

اشکال‌زدایی این انیمیشن‌ها می‌تواند یک تجربه جدید باشد. ابزارهای توسعه‌دهنده مرورگرهای مدرن، به ویژه در کرومیوم، در حال تکامل برای ارائه پشتیبانی عالی هستند:

• تب انیمیشن‌ها: در Chrome DevTools، تب "Animations" بسیار ارزشمند است. این تب تمام انیمیشن‌های فعال را نشان می‌دهد و به شما امکان مکث، پخش مجدد و پیمایش در آنها را می‌دهد. برای انیمیشن‌های مبتنی بر اسکرول، اغلب یک نمایش بصری از تایم‌لاین اسکرول و محدوده فعال را ارائه می‌دهد.
• پنل عناصر: بازرسی عنصر در پنل "Elements" و نگاه کردن به تب "Styles" ویژگی‌های اعمال شده animation-timeline و animation-range را نشان می‌دهد.
• پوشش تایم‌لاین اسکرول: برخی از مرورگرها یک پوشش آزمایشی برای تجسم تایم‌لاین اسکرول به طور مستقیم روی صفحه ارائه می‌دهند که به درک چگونگی نگاشت موقعیت اسکرول به پیشرفت انیمیشن کمک می‌کند.

آشنایی با این ابزارها به طور قابل توجهی فرآیند توسعه و پالایش را تسریع می‌کند.

بهترین شیوه‌ها برای پیاده‌سازی جهانی

در حالی که animation-range آزادی خلاقانه باورنکردنی ارائه می‌دهد، پیاده‌سازی مسئولانه برای تضمین تجربه مثبت برای کاربران در سراسر جهان و با دستگاه‌های مختلف، کلیدی است.

ملاحظات دسترسی‌پذیری

حرکت می‌تواند برای برخی از کاربران، به ویژه آنهایی که دارای اختلالات دهلیزی یا بیماری حرکت هستند، گیج‌کننده یا حتی مضر باشد. همیشه در نظر داشته باشید:

• کوئری رسانه prefers-reduced-motion: به ترجیحات کاربر احترام بگذارید. برای کاربرانی که "کاهش حرکت" را در تنظیمات سیستم عامل خود فعال کرده‌اند، انیمیشن‌های شما باید به طور قابل توجهی کاهش یابند یا کاملاً حذف شوند.

@media (prefers-reduced-motion) {\n  .animated-element {\n    animation: none !important; /* غیرفعال کردن انیمیشن‌ها */\n    transform: none !important; /* بازنشانی تبدیل‌ها */\n    opacity: 1 !important; /* اطمینان از قابلیت مشاهده */\n  }\n}

این یک بهترین شیوه حیاتی دسترسی‌پذیری برای همه انیمیشن‌ها، از جمله انیمیشن‌های مبتنی بر اسکرول است.

• از حرکت بیش از حد خودداری کنید: حتی در صورت فعال بودن، از حرکات تند، سریع یا در مقیاس بزرگ که می‌تواند حواس‌پرت‌کن یا ناراحت‌کننده باشد، خودداری کنید. انیمیشن‌های ظریف اغلب مؤثرتر هستند.
• اطمینان از خوانایی: مطمئن شوید که متن و محتوای حیاتی در طول انیمیشن خوانا باقی می‌مانند. از انیمیشن دادن به متن به گونه‌ای که آن را ناخوانا کند یا باعث سوسو زدن شود، خودداری کنید.

طراحی واکنش‌گرا

انیمیشن‌ها باید در طیف وسیعی از دستگاه‌ها، از مانیتورهای بزرگ دسکتاپ گرفته تا تلفن‌های همراه کوچک، خوب به نظر برسند و عملکرد خوبی داشته باشند. در نظر بگیرید:

• مقادیر مبتنی بر Viewport: استفاده از واحدهای نسبی مانند درصدها، vw، vh برای تبدیل‌ها یا موقعیت‌یابی در کی‌فریم‌ها می‌تواند به مقیاس‌پذیری زیبا انیمیشن‌ها کمک کند.
• کوئری‌های رسانه برای محدوده انیمیشن: ممکن است بخواهید مقادیر animation-range متفاوت یا حتی انیمیشن‌های کاملاً متفاوتی بر اساس اندازه صفحه داشته باشید. به عنوان مثال، یک روایت پیچیده مبتنی بر اسکرول ممکن است برای دستگاه‌های تلفن همراه که فضای صفحه و عملکرد محدودتر است، ساده‌سازی شود.
• تست در دستگاه‌های مختلف: همیشه انیمیشن‌های مبتنی بر اسکرول خود را روی دستگاه‌های واقعی یا با استفاده از شبیه‌سازی قوی دستگاه در DevTools تست کنید تا هرگونه گلوگاه عملکردی یا مشکلات طرح‌بندی را شناسایی کنید.

بهبود تدریجی

همانطور که در سازگاری با مرورگرها ذکر شد، اطمینان حاصل کنید که محتوا و عملکرد اصلی شما هرگز به این انیمیشن‌های پیشرفته وابسته نیستند. کاربران با مرورگرهای قدیمی‌تر یا آنهایی که تنظیمات کاهش حرکت دارند، باید همچنان یک تجربه کامل و رضایت‌بخش داشته باشند. انیمیشن‌ها یک بهبود هستند، نه یک الزام.

این بدان معناست که HTML و CSS خود را طوری ساختار دهید که محتوا از نظر معنایی صحیح و از نظر بصری جذاب باشد، حتی اگر هیچ جاوا اسکریپت یا انیمیشن پیشرفته CSS بارگذاری نشود.

بهینه‌سازی عملکرد

در حالی که انیمیشن‌های بومی CSS کارآمد هستند، انتخاب‌های ضعیف همچنان می‌توانند منجر به مشکل شوند:

• انیمیشن transform و opacity: این ویژگی‌ها برای انیمیشن ایده‌آل هستند زیرا اغلب می‌توانند توسط کامپوزیتور مدیریت شوند و از کارهای طرح‌بندی و نقاشی جلوگیری کنند. از انیمیشن دادن به ویژگی‌هایی مانند width، height، margin، padding، top، left، right، bottom در صورت امکان خودداری کنید، زیرا اینها می‌توانند باعث محاسبات مجدد طرح‌بندی پرهزینه شوند.
• محدود کردن افکت‌های پیچیده: در حالی که وسوسه‌انگیز است، از اعمال بیش از حد انیمیشن‌های مبتنی بر اسکرول همزمان و بسیار پیچیده، به ویژه روی چندین عنصر به طور همزمان، خودداری کنید. تعادلی بین غنای بصری و عملکرد پیدا کنید.
• استفاده از شتاب‌دهنده سخت‌افزاری: ویژگی‌هایی مانند transform: translateZ(0) (اگرچه اغلب با مرورگرهای مدرن و انیمیشن‌های transform دیگر به صراحت مورد نیاز نیستند) گاهی اوقات می‌توانند به مجبور کردن عناصر به لایه‌های کامپوزیت خود کمک کرده و عملکرد را بیشتر افزایش دهند.

مثال‌های واقعی و الهام‌بخش

برای تثبیت بیشتر درک خود و الهام بخشیدن به پروژه بعدی شما، بیایید برخی از کاربردهای واقعی animation-range را مفهوم‌سازی کنیم:

• گزارش‌های سالانه شرکت‌ها: یک گزارش سالانه تعاملی را تصور کنید که در آن نمودارهای مالی با انیمیشن به نما در می‌آیند، شاخص‌های کلیدی عملکرد (KPIs) شمارش می‌شوند و نقاط عطف شرکت با نشانه‌های بصری ظریف با اسکرول کاربر در سند برجسته می‌شوند. هر بخش می‌تواند animation-range خاص خود را داشته باشد و یک تجربه خواندن هدایت شده ایجاد کند.
• ویترین محصولات (تجارت الکترونیک): در یک صفحه جزئیات محصول برای یک گجت جدید، تصویر اصلی محصول می‌تواند با اسکرول کاربر به آرامی بچرخد یا بزرگنمایی شود و ویژگی‌ها را لایه به لایه آشکار کند. تصاویر لوازم جانبی می‌توانند به ترتیب با قابل مشاهده شدن توضیحاتشان ظاهر شوند. این یک صفحه استاتیک را به یک کاوش پویا تبدیل می‌کند.
• پلتفرم‌های محتوای آموزشی: برای مفاهیم علمی پیچیده یا تایم‌لاین‌های تاریخی، انیمیشن‌های مبتنی بر اسکرول می‌توانند فرآیندها را به تصویر بکشند. یک نمودار می‌تواند قطعه به قطعه خود را بسازد، یا یک نقشه تاریخی می‌تواند با انیمیشن حرکات نیروها را نشان دهد، همه اینها با عمق اسکرول کاربر همگام‌سازی شده است. این به درک و حفظ مطلب کمک می‌کند.
• وب‌سایت‌های رویداد: یک وب‌سایت جشنواره می‌تواند یک "رونمایی از لیست هنرمندان" داشته باشد که در آن عکس‌ها و نام‌های هنرمندان فقط زمانی که بخش آنها برجسته می‌شود، با انیمیشن به نما در می‌آیند. یک بخش برنامه می‌تواند با یک تغییر پس‌زمینه ظریف با عبور کاربر از آن، شکاف زمانی فعلی را برجسته کند.
• پورتفولیوهای هنری: هنرمندان می‌توانند از animation-range برای ایجاد ویترین‌های منحصر به فرد برای آثار خود استفاده کنند، جایی که هر قطعه با یک انیمیشن سفارشی متناسب با سبک خود رونمایی می‌شود و یک تجربه مرور به یاد ماندنی و هنری ایجاد می‌کند.

این مثال‌ها تطبیق‌پذیری و قدرت بیانی animation-range را برجسته می‌کنند. با تفکر خلاقانه در مورد چگونگی هدایت روایت و آشکارسازی محتوا توسط اسکرول، توسعه‌دهندگان می‌توانند تجربیات دیجیتالی واقعاً منحصر به فرد و جذابی را ایجاد کنند که در یک چشم‌انداز آنلاین شلوغ متمایز شوند.

نتیجه‌گیری

محدوده انیمیشن CSS، در کنار animation-timeline، یک جهش قابل توجه رو به جلو در قابلیت‌های انیمیشن بومی وب را نشان می‌دهد. این به توسعه‌دهندگان فرانت‌اند سطح بی‌سابقه‌ای از کنترل اعلانی بر افکت‌های مبتنی بر اسکرول را ارائه می‌دهد و تعاملات پیچیده را از حوزه کتابخانه‌های پیچیده جاوا اسکریپت به حوزه کارآمدتر و قابل نگهداری‌تر CSS خالص منتقل می‌کند.

با تعریف دقیق نقاط شروع و پایان یک انیمیشن در یک تایم‌لاین اسکرول، می‌توانید افکت‌های پارالاکس نفس‌گیر، رونمایی‌های جذاب محتوا، نشانگرهای پیشرفت پویا و روایت‌های چند مرحله‌ای پیچیده را هماهنگ کنید. مزایای عملکردی، همراه با ظرافت راه‌حل‌های بومی CSS، این را به یک افزودنی قدرتمند به جعبه ابزار هر توسعه‌دهنده‌ای تبدیل می‌کند.

در حالی که پشتیبانی مرورگرها هنوز در حال تثبیت است، استراتژی بهبود تدریجی تضمین می‌کند که می‌توانید از امروز شروع به آزمایش و پیاده‌سازی این ویژگی‌ها کنید و تجربیات پیشرفته‌ای را برای کاربران با مرورگرهای مدرن فراهم کنید در حالی که برای دیگران به آرامی جایگزین ارائه می‌دهید.

وب یک بوم همیشه در حال تکامل است. از محدوده انیمیشن CSS برای نقاشی تجربیات کاربری پرجنب‌وجوش‌تر، تعاملی‌تر و کارآمدتر استفاده کنید. شروع به آزمایش کنید، چیزهای شگفت‌انگیزی بسازید و به دنیای دیجیتالی پویاتر و جذاب‌تر برای همه کمک کنید.