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

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 جدید در ارتباط با Web Animations API (WAAPI) و CSS Animations API برای فعال کردن انیمیشن‌های پیمایش محور اعلامی کار می‌کند.

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

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

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