Google आपकी पसंदीदा भाषा में कॉन्टेंट का अनुवाद करने के लिए, एआई टेक्नोलॉजी का इस्तेमाल करता है. एआई से मिले अनुवादों में गलतियां हो सकती हैं.

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

Yuriko Hirota

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

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

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

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

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

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

Browser Support

Source

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

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

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

जब भी scroll इवेंट होता है, तब दस्तावेज़ जवाब देता है. इससे यह पता चलता है कि उपयोगकर्ता ने scrollHeight का कितना प्रतिशत हिस्सा स्क्रोल किया है.

document.addEventListener("scroll&q>uot;, () = {
  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 की बातचीत देखें!