انیمیشن‌های اسکرول شونده در CSS در راه هستند!

Bramus

منتشر شده: ۱۲ دسامبر ۲۰۲۵

در سال ۲۰۲۳، ما انیمیشن‌های اسکرول‌محور را عرضه کردیم که به شما امکان می‌دهند یک انیمیشن را با اسکرول کردن به جلو (یا عقب) ببرید. در انیمیشن‌های اسکرول‌محور، پیشرفت انیمیشن با اسکرول کردن شما از ۰٪ تا ۱۰۰٪ افزایش می‌یابد. اگر اسکرول کردن را متوقف کنید، انیمیشن متوقف می‌شود؛ اگر به بالا اسکرول کنید، انیمیشن برعکس می‌شود.

فصل بعدی انیمیشن‌های مبتنی بر اسکرول در سال ۲۰۲۶ از راه می‌رسد، و انیمیشن‌های فعال‌شده با اسکرول در کروم ۱۴۵ عرضه خواهند شد. این‌ها انیمیشن‌های مبتنی بر زمان هستند که هنگام عبور از یک آفست اسکرول خاص فعال می‌شوند.

برای این نوع افکت با IntersectionObserver خداحافظی کنید، زیرا اکنون می‌توانید آن را به صورت اعلانی در CSS انجام دهید.

محرک‌های جدول زمانی، محرک‌های انیمیشن و اقدامات

فعال کردن یک انیمیشن

برای تنظیم یک انیمیشن اسکرول شونده در CSS، با یک انیمیشن CSS معمولی که به یک عنصر متصل شده است، شروع کنید:

animation: unclip 0.35s ease-in-out both;

این انیمیشن از DocumentTimeline به عنوان درایور خود استفاده می‌کند و به مدت ۰.۳۵ ثانیه اجرا می‌شود. این انیمیشن پس از بارگذاری صفحه به طور خودکار اجرا می‌شود. برای تغییر زمان اجرا، از ویژگی جدید animation-trigger در CSS استفاده کنید:

animation-trigger: --t play-forwards play-backwards;

در اینجا، انیمیشن طوری تنظیم شده است که توسط تریگر --t فعال شود. وقتی این تریگر فعال می‌شود، اکشن play-forwards روی انیمیشن اجرا می‌شود و وقتی تریگر غیرفعال می‌شود، اکشن play-backwards اجرا می‌شود.

مشخصات شامل لیست کامل اقدامات است.

یک تریگر ایجاد کنید

اما آن تریگر --t چیست؟ این تریگر یک تریگر با نام --t است. به طور خاص برای انیمیشن‌های اسکرول-تریگر، این یک "تریگر جدول زمانی" است که از یک جدول زمانی پیشرفت اسکرول یا یک جدول زمانی پیشرفت مشاهده به عنوان منبع خود استفاده می‌کند.

برای تعریف یک تریگر تایم‌لاین، از ویژگی timeline-trigger (یا توابع طولانی مرتبط با آن) استفاده کنید. برای مثال، برای ایجاد تریگری با نام --t که از یک تایم‌لاین نما به عنوان منبع خود استفاده می‌کند، از کد زیر استفاده کنید:

timeline-trigger-name: --t;
timeline-trigger-source: view();

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

محدوده‌های ماشه را تغییر دهید

برای تنظیم موقعیت‌هایی که تریگر باید فعال یا غیرفعال باشد، محدوده‌های فعال‌سازی و فعال‌سازی را روی تریگر مشخص کنید. در مثال زیر، محدوده فعال‌سازی روی entry 100% exit 0% تنظیم شده است، به این معنی که تریگر زمانی فعال می‌شود که سوژه در آن محدوده قرار گیرد.

timeline-trigger:
  --t
  view()
  entry 100% exit 0%
;

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

وقتی این با animation-trigger از پیش تعریف شده ترکیب شود، از نظر بصری منجر به این می‌شود که وقتی سوژه کاملاً وارد درگاه اسکرول شده است، انیمیشن به جلو پخش شود و وقتی در شرف خروج از درگاه اسکرول است، انیمیشن به عقب پخش شود.

می‌توان محدوده‌های فعال‌سازی و فعال‌سازی متفاوتی داشت. برای مثال:

timeline-trigger:
  --t
  view()
  entry 100% exit 0% / entry 0% exit 100%
;

در اینجا، تریگر زمانی فعال می‌شود که سوژه در محدوده entry 100% exit 0% قرار داشته باشد. تریگر تا زمانی که از محدوده entry 0% exit 100% خارج نشده باشد، فعال می‌ماند.

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

محدود کردن دامنه یک تریگر

تریگرها به صورت سراسری قابل مشاهده هستند، به این معنی که آخرین تطبیقی ​​که تریگر را با نام خاصی اعلام می‌کند، "برنده" می‌شود. برای محدود کردن قابلیت مشاهده یک تریگر، از ویژگی trigger-scope استفاده کنید. این مشابه نحوه استفاده anchor-scope است.

trigger-scope: --t; /* List of dashed idents, or `all` */

وقتی یک قانون CSS دارید که یک trigger را تعریف می‌کند و با چندین عنصر مطابقت دارد، باید از trigger-scope استفاده کنید.

نسخه آزمایشی

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

منطق انیمیشن اسکرول-تریگر شده برای این مورد به صورت زیر است:

@keyframes card {
  from { translate: 0 -50% 0; }
}

@keyframes card-contents {
  from { opacity: 0; height: 0px; }
  to { opacity: 1; height: auto; }
}

.card {
  overflow-y: clip; /* Hide any overflow in the y-axis */

  timeline-trigger:
    --t
    view()
    contain 15% contain 85% / entry 100% exit 0%
  ;
  trigger-scope: --t;

  animation: unclip var(--duration) ease-in-out both;
  animation-trigger: --t play-forwards play-backwards;
}

.card > * {
  interpolate-size: allow-keywords; /* To animate to `height: auto` */

  animation: card-contents var(--duration) ease-in-out both;
  animation-trigger: --t play-forwards play-backwards;
}

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

• timeline-trigger با نام --t نامگذاری شده و منبع آن روی یک جدول زمانی نمایش تنظیم شده است که عنصر منطبق را دنبال می‌کند.
• محدوده فعال‌سازی تریگر contain 15% contain 85% است. وقتی سوژه در آن محدوده قرار می‌گیرد، تریگر فعال می‌شود.
• وقتی فعال می‌شود، ماشه تا زمانی که سوژه در محدوده فعال entry 100% exit 0% باشد، فعال می‌ماند.
• انیمیشن unclip به عنصر متصل شده است.
• انیمیشن طوری تنظیم شده است که --t به عنوان منبع تریگر خود استفاده کند. وقتی تریگر فعال می‌شود، انیمیشن شروع به پخش در جهت رو به جلو می‌کند.
• وقتی ماشه غیرفعال می‌شود - که زمانی اتفاق می‌افتد که سوژه از محدوده فعال خارج شود - انیمیشن به عقب برمی‌گردد.
• محتویات کارت نیز با استفاده از همان تریگر --t به داخل و خارج حرکت می‌کنند.

این مثال شامل یک جایگزین با استفاده از IntersectionObserver برای مرورگرهایی است که از timeline-trigger پشتیبانی نمی‌کنند.

دموهای بیشتر

اگر از انیمیشن‌های اسکرول‌شونده سیر نمی‌شوید، دموهای زیر را ببینید:

• متن پروازی
• ملاقات با هیولاها (داستان‌سرایی با طومار)
• شکل گیری شکل

بازخورد

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

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