مطالعه موردی در مورد عملکرد انیمیشن های اسکرول محور

Yuriko Hirota

چه چیزهای جدیدی در انیمیشن‌های اسکرول-رانده شده وجود دارد؟

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

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

• پیمایش در یک نخ جداگانه انجام می‌شود و بنابراین رویدادهای پیمایش را به صورت ناهمزمان ارائه می‌دهد.
• انیمیشن‌های نخ اصلی در معرض jank هستند.

این امر ایجاد انیمیشن‌های اسکرول-محور کارآمد که با اسکرول کردن هماهنگ باشند را غیرممکن یا بسیار دشوار می‌کند.

اکنون مجموعه‌ای جدید از APIها را برای پشتیبانی از انیمیشن‌های اسکرول‌محور معرفی می‌کنیم که می‌توانید از CSS یا جاوااسکریپت استفاده کنید. این API تلاش می‌کند تا حد امکان از منابع نخ اصلی کمتری استفاده کند و پیاده‌سازی انیمیشن‌های اسکرول‌محور را بسیار آسان‌تر و همچنین بسیار روان‌تر کند. API انیمیشن‌های اسکرول‌محور در حال حاضر در مرورگرهای زیر پشتیبانی می‌شود:

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

انیمیشن‌های اسکرول‌محور CSS API در مقابل جاوااسکریپت کلاسیک

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

این سند هر بار که رویداد scroll اتفاق می‌افتد، پاسخ می‌دهد تا محاسبه کند که کاربر چند درصد از scrollHeight را پیمایش کرده است.

document.addEventListener("scroll", () => {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100; 
  document.getElementById("progress").style.width = scrolled + "%";
})

دموی زیر همان نوار پیشرفت را با استفاده از API جدید با CSS نشان می‌دهد.

@keyframes grow-progress {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

#progress {
  animation: grow-progress auto linear forwards;
  animation-timeline: scroll(block root);
}

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

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

function someHeavyJS(){
  let time = 0;
  window.setInterval(function () {
    time++;
    for (var i = 0; i < 1e9; i++) {
      result = i;
    }
    console.log(time)
  }, 100);
}

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

همانطور که در تصاویر زیر نشان داده شده است، میزان استفاده از CPU در DevTools کاملاً متفاوت است.

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

انیمیشن‌های جدید اسکرول‌محور در API جاوااسکریپت در مقابل جاوااسکریپت کلاسیک

مزیت API جدید فقط به CSS محدود نمی‌شود. شما می‌توانید با استفاده از جاوا اسکریپت نیز انیمیشن‌های اسکرول‌محور و روان ایجاد کنید. به مثال زیر نگاهی بیندازید:

const progressbar = document.querySelector('#progress');
progressbar.style.transformOrigin = '0% 50%';
progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

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

همچنین، این API جدید در کنار API انیمیشن‌های وب (WAAPI) و API انیمیشن‌های CSS موجود، برای فعال کردن انیمیشن‌های اسکرول‌محور اعلانی، کار می‌کند.

دموها و منابع بیشتر

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

اگر علاقه‌مند به کسب اطلاعات بیشتر در مورد انیمیشن‌های جدید اسکرول محور هستید، این مقاله و سخنرانی I/O 2023 را بررسی کنید!