इस पेज का अनुवाद Cloud Translation API से किया गया है.

स्क्रोल करके चलने वाले ऐनिमेशन की परफ़ॉर्मेंस के बारे में केस स्टडी

Yuriko Hirota

स्क्रोल-ड्रिवन ऐनिमेशन में क्या नया है?

स्क्रोल-ड्रिवन ऐनिमेशन, आपकी वेबसाइट या वेब ऐप्लिकेशन में इंटरैक्टिविटी और विज़ुअल दिलचस्पी जोड़ने का एक तरीका है. ये ऐनिमेशन, उपयोगकर्ता की स्क्रोल पोज़िशन से ट्रिगर होते हैं. यह उपयोगकर्ताओं को जोड़े रखने और अपनी वेबसाइट को विज़ुअल तौर पर ज़्यादा आकर्षक बनाने का एक बेहतरीन तरीका हो सकता है.

पहले, स्क्रॉल से चलने वाले ऐनिमेशन बनाने का सिर्फ़ एक तरीका था. इसके लिए, मुख्य थ्रेड पर स्क्रॉल इवेंट का जवाब देना होता था. इससे दो बड़ी समस्याएं हुईं:

स्क्रोल करने की प्रोसेस एक अलग थ्रेड पर की जाती है, इसलिए यह एसिंक्रोनस तरीके से स्क्रोल इवेंट को डिलीवर करती है.
मुख्य थ्रेड के ऐनिमेशन जैंक किए जा सकते हैं.

इससे, स्क्रोल करने पर सिंक होने वाले और बेहतर परफ़ॉर्म करने वाले ऐनिमेशन बनाना असंभव या बहुत मुश्किल हो जाता है.

हम अब स्क्रोल-ड्रिवन ऐनिमेशन के साथ काम करने के लिए, एपीआई का एक नया सेट पेश कर रहे हैं. इसका इस्तेमाल सीएसएस या JavaScript से किया जा सकता है. एपीआई, मुख्य थ्रेड के संसाधनों का कम से कम इस्तेमाल करने की कोशिश करता है. इससे स्क्रोल-ड्रिवन ऐनिमेशन को लागू करना ज़्यादा आसान हो जाता है और यह ज़्यादा बेहतर तरीके से काम करता है. फ़िलहाल, स्क्रोल-ड्रिवन ऐनिमेशन एपीआई इन ब्राउज़र पर काम करता है:

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

सोर्स

इस लेख में, नए तरीके की तुलना JavaScript की क्लासिक तकनीक से की गई है. इससे यह पता चलता है कि नए एपीआई की मदद से, स्क्रोल-ड्रिवन ऐनिमेशन बनाने का तरीका कितना आसान और बेहतर है.

स्क्रोल-ड्रिवन ऐनिमेशन सीएसएस एपीआई बनाम क्लासिक JavaScript

प्रोग्रेस बार का यह उदाहरण, क्लास JavaScript तकनीकों का इस्तेमाल करके बनाया गया है.

यह दस्तावेज़ हर बार 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 + "%";
})

नीचे दिए गए डेमो में, सीएसएस के साथ नए एपीआई का इस्तेमाल करके, वही प्रोग्रेस बार दिखाया गया है.

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

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

सीएसएस की नई animation-timeline सुविधा, स्क्रोल रेंज में किसी पोज़िशन को प्रोग्रेस के प्रतिशत में अपने-आप बदल देती है. इसलिए, यह सुविधा ज़्यादा काम करती है.

अब दिलचस्प बात यह है कि मान लीजिए कि आपने वेबसाइट के दोनों वर्शन पर एक बहुत बड़ा हिसाब लगाने का तरीका अपनाया. ऐसा करने से थ्रेड के ज़्यादातर संसाधन खत्म हो जाते हैं.

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

जैसा कि आपको उम्मीद थी, मुख्य थ्रेड के रिसॉर्स जंक्शन की वजह से, क्लासिक JavaScript वर्शन में रुकावट आती है और यह धीमा हो जाता है. दूसरी ओर, सीएसएस वर्शन पर ज़्यादा JavaScript काम का कोई असर नहीं पड़ता. साथ ही, यह उपयोगकर्ता के स्क्रोल इंटरैक्शन का जवाब दे सकता है.

देखें

DevTools में सीपीयू का इस्तेमाल पूरी तरह से अलग होता है, जैसा कि नीचे दिए गए स्क्रीनशॉट में दिखाया गया है.

मुख्य थ्रेड की तुलना.

यहां दिए गए डेमो में, CyberAgent की ओर से बनाए गए स्क्रोल ड्रिवन ऐनिमेशन का इस्तेमाल दिखाया गया है. स्क्रीन पर स्क्रोल करने पर, फ़ोटो धीरे-धीरे दिखने लगती है.

स्क्रोल-ड्रिवन ऐनिमेशन के लिए नए JavaScript API और क्लासिक JavaScript के बीच अंतर

नए एपीआई का फ़ायदा सिर्फ़ सीएसएस तक सीमित नहीं है. JavaScript का इस्तेमाल करके भी, स्क्रीन पर स्क्रोल करने पर चलने वाले ऐनिमेशन बनाए जा सकते हैं. नीचे दिया गया उदाहरण देखें:

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,
    }),
  }
);

इससे, सीएसएस के पिछले डेमो में दिखाया गया प्रोग्रेस बार ऐनिमेशन, सिर्फ़ JavaScript का इस्तेमाल करके बनाया जा सकता है. इसमें इस्तेमाल की जाने वाली टेक्नोलॉजी, सीएसएस वर्शन जैसी ही है. एपीआई, मुख्य थ्रेड के ज़्यादा से ज़्यादा संसाधनों का इस्तेमाल करने की कोशिश करता है. इससे, क्लासिक JavaScript के तरीके की तुलना में ऐनिमेशन ज़्यादा बेहतर तरीके से काम करते हैं.

साथ ही, यह नया एपीआई, मौजूदा Web Animations API (WAAPI) और CSS Animations API के साथ मिलकर काम करता है, ताकि स्क्रोल से चलने वाले ऐनिमेशन चालू किए जा सकें.

देखें

ज़्यादा डेमो और संसाधन

इस डेमो साइट पर जाकर, स्क्रोल ड्रिवन ऐनिमेशन के अलग-अलग तरीके देखे जा सकते हैं. यहां सीएसएस और JavaScript के इन नए एपीआई का इस्तेमाल करके, डेमो की तुलना की जा सकती है.

अगर आपको स्क्रोल से चलने वाले नए ऐनिमेशन के बारे में ज़्यादा जानना है, तो यह लेख और I/O 2023 टॉक देखें!