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

स्क्रोल करके बनाए गए ऐनिमेशन में नया क्या है?

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

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

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

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

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

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

स्क्रोल करके चलने वाले ऐनिमेशन CSS API बनाम क्लासिक 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);
}

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

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

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 एपीआई' बनाम क्लासिक 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 webs API (WAAPI) और CSS Animations API के साथ काम करता है, ताकि डिक्लेरेटिव स्क्रोल-ड्रिवन ऐनिमेशन चालू किए जा सकें.

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

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

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