इस पेज का अनुवाद 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 + "%";
})

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

@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 टॉक देखें!