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

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 की बातचीत देखें!