स्क्रोल-ड्रिवन ऐनिमेशन की केस स्टडी

Swetha Gopalakrishnan

Saurabh Rajpal

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

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

हालांकि, नए नियमों के एक हिस्से के रूप में ब्राउज़र में सीएसएस और यूज़र इंटरफ़ेस (यूआई) की सुविधाएं दिखाना, अब आप कर सकते हैं जानकारी देने वाले स्क्रोल-ड्रिवन ऐनिमेशन बनाने के लिए किया जा सकता है. टाइमलाइन और व्यू स्क्रोल करने की सुविधा की मदद से टाइमलाइन, नए कॉन्सेप्ट जो मौजूदा रिपोर्ट के साथ इंटिग्रेट होते हैं Web Animations API (WAAPI) और सीएसएस ऐनिमेशन एपीआई, अब तुम उसे रेशमी स्मूद बना सकती हो चैट की मदद से, मुख्य थ्रेड में चल रहे ऐनिमेशन की मदद से, कुछ ही लाइन का इस्तेमाल करें कोड. इस केस स्टडी में जानें कि Tokopedia, RedBus, और Policybaar किस तरह से हैं को पहले ही इस नई सुविधा का फ़ायदा मिल रहा था.

Tokopedia

Tokopedia ने अपने पिछले कस्टम JavaScript को लागू करने के तरीके को पेज की परफ़ॉर्मेंस को ऑप्टिमाइज़ करने और बेहतर बनाने के लिए, स्क्रोल करके दिखाए जाने वाले ऐनिमेशन उपयोगकर्ता को कितने विज्ञापन दिखेंगे, इस बारे में जानकारी.

हम अपने कोड की तुलना में 80% तक कोड कम करने में कामयाब रहे कंवेंशनल JavaScript स्क्रोल इवेंट में हिस्सा लिया और पाया कि सीपीयू के औसत इस्तेमाल का पता चला स्क्रोल करते समय 50% से घटकर 2% हो गया— एंडी विहालिम, सीनियर सॉफ़्टवेयर इंजीनियर, टोकोपीडिया

कोड

नीचे दिए गए तरीके में, बिना नाम वाला स्क्रोल करने की सुविधा सेट करने के लिए scroll() फ़ंक्शन का इस्तेमाल किया गया है सीएसएस ऐनिमेशन की प्रोग्रेस को कंट्रोल करने के लिए, प्रोग्रेस टाइमलाइन. कॉन्टेंट बनाने सबसे ऊपर मौजूद स्टिकी बार की विज़िबिलिटी, पेज पर मौजूद स्क्रोल पोज़िशन के हिसाब से बदल जाती है परिभाषित animationRange.

const toggleBar = keyframes({
  to: { height: 48 },
});

export const cssWrapper = css({
  position: 'fixed',
  left: 0,
  width: '100vw',
  pointerEvents: 'none',
  marginTop: 120,
  height: 0,
  overflow: 'hidden',
  display: 'flex',
  flexDirection: 'column',
  justifyContent: 'flex-end',
  animation: `${toggleBar} linear both`,
  animationTimeline: 'scroll()',
  animationRange: '20px 70px',
});

redBus

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

उपयोग के उदाहरण

इमेज रिवील वाली फ़ोटो गैलरी (इसके लिए और कवर फ़्लो (इसके लिए) डेस्कटॉप से कनेक्ट होता है.

कोड (मोबाइल)

पिछले उदाहरण में, Tokopedia ने अनाम स्क्रोल प्रोग्रेस टाइमलाइन देखें. निम्न कोड में, RedBus नामित दृश्य प्रगति का उपयोग करता है टाइमलाइन देखें. यह ऐनिमेशन, <img> के opacity और clip-path को बदल देता है एलिमेंट के सबसे पास के अंदर बताए गए animation-range में एलिमेंट एंसेस्टर स्क्रोलर, जो इस मामले में फ़ोटो गैलरी स्क्रोलर है.

const reveal = keyframes`
   from {
       opacity: 0;
       clip-path: inset(45% 20% 45% 20%);
   }
   to {
       opacity: 1;
       clip-path: inset(0% 0% 0% 0%);
   }`

const CardImage = styled.div`
   width: 100%;
   height: 100%;
   img {
       border-top-left-radius: 0.75rem;
       border-top-right-radius: 0.75rem;
       height: 100%;
       width: 100%;
       object-fit: cover;
       view-timeline-name: --revealing-image;
       view-timeline-axis: block;
  
       /* Attach animation, linked to the  View Timeline */
       animation: linear ${reveal} both;
       animation-timeline: --revealing-image;
  
       /* Tweak range when effect should run*/
       animation-range: entry 25% cover 50%;
   }
`;

हमें यह देखकर बहुत खुशी होगी, क्योंकि यह एक बेहतर परफ़ॉर्मेंस है बेहतर अनुभव के साथ, एसईओ के लिए पेज की परफ़ॉर्मेंस से जुड़े सिग्नल को बूस्ट करता है. सबसे ऊपर है कि कम से कम लर्निंग कर्व, इसे हर ई-कॉमर्स के लिए ज़रूरी वेबसाइट. हमें अन्य टीमों से भी अच्छे सुझाव और मदद मिली, ताकि एसडीए का इस्तेमाल करें.— अमित कुमार, सीनियर इंजीनियरिंग मैनेजर, RedBus.

नीतिबाज़ार

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

स्क्रोल-चालित एनिमेशन के साथ, हम इससे एक ही जगह पर प्लान की तुलना करने में मदद मिलती है, ताकि साफ़ तौर पर पढ़ने में मदद मिल सके अनुभव.—ऋषभ मेहरोत्रा, हेड ऑफ़ डिज़ाइन फ़ॉर लाइफ़ इंश्योरेंस बीयू, पॉलिसीबाज़ार.

कोड

टोकोपीडिया के पिछले उदाहरण की तरह ही, पॉलिसी बाज़ार scroll() फ़ंक्शन के लिए अनाम स्क्रोल करने की प्रोग्रेस की टाइमलाइन सेट करने का तरीका सीएसएस ऐनिमेशन की प्रोग्रेस को कंट्रोल कर रही है. इस मामले में फ़ॉन्ट को छोटा करना तय की गई सूची में मौजूद स्क्रोल पोज़िशन के आधार पर, हेडर का साइज़ और उसे फ़ेड करना animation-range.

@supports (animation-timeline: scroll()) {
.plan-comparison .inner-header {
animation: move-and-fade-header linear both;
}
.plan-comparison .left-side {
animation: shrink-name linear both;
}
.plan-comparison .inner-header, .plan-comparison .left-side {
animation-timeline: scroll();
animation-range: 0 150px;
}
}

@keyframes move-and-fade-header {
  to {
    translate: 0% -5%;
    top:103px;
}
}

@keyframes shrink-name {
  to {
    font-size: 1.5rem;
  }
}

उपयोगकर्ता के अनुभव में आम तौर पर, स्क्रोल किए जाने वाले ऐनिमेशन का पैटर्न

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

@keyframes animate-in {
 0% { opacity: 0; transform: translateY(10%); }
 100% { opacity: 1; transform: translateY(0); }
}

@keyframes animate-out {
 0% { opacity: 1; transform: translateY(0); }
 100% { opacity: 0; transform: translateY(-10%); }
}

.flyin_animate {
   animation: animate-in linear forwards;
   animation-timeline: view();
   animation-range: entry;
}

RedBus (होम पेज)

Policybazaar (प्रॉडक्ट लिस्टिंग पेज)

Tokopedia (प्रॉडक्ट की जानकारी वाला पेज)

स्क्रोल किए जाने वाले ऐनिमेशन एपीआई का इस्तेमाल करते समय इन बातों का ध्यान रखें

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

सीएसएस में जाकर, @supports का इस्तेमाल करके यह पता लगाया जा सकता है कि ऐनिमेशन-टाइमलाइन ठीक से काम कर रहा है या नहीं का इस्तेमाल करने से पहले ध्यान में रखें. उदाहरण के लिए:

@supports (animation-timeline: scroll()) {

}

संसाधन

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

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

• आपकी ई-कॉमर्स साइट के लिए, वेब यूज़र इंटरफ़ेस (यूआई) की क्षमताएं अहम क्यों हैं?
• ट्रांज़िशन की केस स्टडी देखें
• Popover API से जुड़ी केस स्टडी
• कंटेनर क्वेरी की केस स्टडी
• :has() सिलेक्टर की केस स्टडी