कंटेंट के ऊपर ट्रांसपेरेंट एनिमेशन कैसे लगाएँ

कौन से फ़ॉर्मेट ट्रांसपेरेंट बैकग्राउंड बनाए रखते हैं?

वीडियो के लिए आपको दोनों फ़ाइलें चाहिए। Jake Archibald के टेस्ट किए गए markup में HEVC source पहले आता है, क्योंकि Safari VP9 चला सकता है लेकिन उसकी ट्रांसपेरेंसी नहीं, और वरना वह WebM चुनकर एक opaque बॉक्स दिखाएगा (Jake Archibald)। उनके टेस्ट में वही क्लिप VP9 में 1.1 MB और HEVC में 3.4 MB थी।

Rive file में दो फ़ाइलों का झंझट नहीं होता और यह आमतौर पर कहीं छोटी होती है, लेकिन इसके लिए Rive रनटाइम चाहिए। जब एनिमेशन पहले से रेंडर हो (3D, particles, live footage) तो वीडियो इस्तेमाल करें, और जब वह ऐसा कैरेक्टर हो जिसे रिएक्ट करना है तो Rive। एन्कोडिंग की जानकारी ट्रांसपेरेंट वीडियो गाइड में है।

CSS से पेज के ऊपर एनिमेशन की लेयर कैसे लगाएँ?

कंटेंट के container को positioning context बनाएँ, फिर एनिमेशन को उसके ऊपर एक absolutely positioned child में रखें:

<div class="stage">
  <img src="/product.jpg" alt="The Acme backpack in green" width="1200" height="800">
  <video class="overlay" autoplay muted loop playsinline aria-hidden="true">
    <source src="/sparkle.mov" type='video/quicktime; codecs="hvc1"'>
    <source src="/sparkle.webm" type="video/webm">
  </video>
</div>

<style>
.stage { position: relative; isolation: isolate; }
.stage img { display: block; width: 100%; height: auto; }
.overlay {
  position: absolute;
  inset: auto 4% 4% auto;    /* bottom-right corner */
  width: clamp(96px, 22%, 240px);
  aspect-ratio: 1;
  z-index: 1;
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .overlay { display: none; }
}
</style>

isolation: isolate एक stacking context बनाता है, इसलिए ओवरले का z-index सिर्फ़ .stage के अंदर के siblings से मुकाबला करता है और कभी आपकी साइट के header या modals के ऊपर नहीं आता। Rive ओवरले के लिए वीडियो की जगह <canvas class="overlay"> रखें और उस पर Rive instance बनाएँ; जहाँ आर्टवर्क ड्रॉ नहीं होता वहाँ canvas ट्रांसपेरेंट रहता है।

iOS Safari पर inline वीडियो तभी ऑटोप्ले हो सकता है जब वह muted हो और उसमें playsinline हो (WebKit)। कंटेंट के पास पाँच सेकंड से ज़्यादा चलने वाले लूपिंग ओवरले के लिए WCAG 2.2.2 के तहत उसे pause करने या छिपाने का तरीका भी चाहिए, या उसे कुछ चक्रों के बाद रुक जाना चाहिए।

ओवरले को टैप और क्लिक रोकने से कैसे बचाएँ?

वेब पर ओवरले पर pointer-events: none लगाने से क्लिक, टैप और hover नीचे की चीज़ तक पहुँच जाते हैं। इसके बिना ट्रांसपेरेंट canvas या वीडियो अपने rectangle के अंदर हर क्लिक पकड़ लेता है, उन जगहों पर भी जहाँ कुछ दिखता नहीं। यह ओवरले का सबसे आम bug है।

दो सावधानियाँ:

• Rive listeners काम करना बंद कर देते हैं। अगर स्टेट मशीन Rive listeners के ज़रिए hover या क्लिक पर रिएक्ट करती है, तो उन्हें canvas पर pointer events चाहिए। या तो सिर्फ़ कैरेक्टर को कवर करने वाले छोटे canvas पर pointer-events: auto रखें, या रिएक्शन को code से ट्रिगर के ज़रिए चलाएँ।
• इसे accessibility tree से बाहर रखें। सजावटी ओवरले पर aria-hidden="true" जोड़ें ताकि screen readers उन्हें छोड़ दें।

SwiftUI में .overlay या ZStack इस्तेमाल होता है, और .allowsHitTesting(false) टच को आर-पार जाने देता है:

ContentView()
  .overlay(alignment: .bottomTrailing) {
    mascot.view()
      .frame(width: 120, height: 120)
      .allowsHitTesting(false)
      .accessibilityHidden(true)
      .padding()
  }

Jetpack Compose में Box इस्तेमाल होता है, जिसमें ओवरले सबसे आखिर में ड्रॉ होता है। pointer-input modifiers के बिना composable टच नहीं पकड़ता, इसलिए टैप नीचे के कंटेंट तक पहुँचते हैं। अगर player AndroidView के ज़रिए एम्बेड किया गया View है, तो जाँच लें कि वह टच intercept न करे।

Box(Modifier.fillMaxSize()) {
  Content()
  Mascot(Modifier.align(Alignment.BottomEnd).padding(16.dp).size(120.dp))
}

ओवरले को responsive तरीके से साइज़ और पोज़िशन कैसे करें?

• सीमाओं के साथ relative units इस्तेमाल करें। width: clamp(96px, 22%, 240px) container के साथ बढ़ता है, लेकिन फ़ोन पर कभी बहुत छोटा या चौड़ी स्क्रीन पर बहुत बड़ा नहीं होता।
• आकार लॉक करें। aspect-ratio: 1 (या क्लिप का ratio) file लोड होने से पहले सही ऊँचाई रिज़र्व कर लेता है, ताकि कुछ भी उछले नहीं।
• किसी कोने या किनारे से जोड़ें। प्रतिशत में inset वैल्यू कैरेक्टर को हर स्क्रीन साइज़ पर उसी सापेक्ष जगह पर रखती हैं।
• फ़िट करें, क्रॉप नहीं। वीडियो के लिए object-fit: contain इस्तेमाल करें; Rive के लिए layout fit को contain पर सेट करें ताकि आर्टबोर्ड कभी कटे नहीं।
• Rive drawing surface का साइज़ सेट करें। Load होने पर और canvas का साइज़ बदलने पर resizeDrawingSurfaceToCanvas() कॉल करें, ताकि device pixel ratio पर भी vector किनारे शार्प रहें (Rive)।

छोटी स्क्रीन पर सोचें कि क्या ओवरले अब भी उतनी जगह लेने लायक है। अगर फ़ोन की चौड़ाई पर वह टेक्स्ट या बटन को ढक दे, तो उसे कंटेंट के नीचे ले जाएँ या उस breakpoint पर छिपा दें।

ट्रांसपेरेंट ओवरले की एक्सेसिबिलिटी कैसे बनाए रखें?

Overlay उस कंटेंट के ऊपर रहते हैं जिसे लोगों को पढ़ना और इस्तेमाल करना होता है, इसलिए अपने अलग बॉक्स में चलने वाले एनिमेशन की तुलना में इनमें एक्सेसिबिलिटी का जोखिम ज़्यादा होता है।

• टेक्स्ट या कंट्रोल को कभी न ढकें। हर breakpoint जाँचें। जो overlay किसी चौड़ाई पर heading या बटन का हिस्सा छिपा दे, वह bug है, भले ही click-through चालू हो।
• कंट्रास्ट बनाए रखें। अगर overlay टेक्स्ट के पीछे से गुज़रता है, तो टेक्स्ट हर फ़्रेम पर पढ़ने लायक रहना चाहिए, सिर्फ़ पहले फ़्रेम पर नहीं।
• सजावटी एलिमेंट को assistive technology से छिपाएँ। वेब पर aria-hidden="true" और SwiftUI में .accessibilityHidden(true) इस्तेमाल करें। अगर एनिमेशन कोई मतलब बताता है, जैसे success स्टेट, तो वह मतलब असली टेक्स्ट में भी लिखें।
• मोशन कम करें सेटिंग का सम्मान करें। prefers-reduced-motion: reduce होने पर overlay छिपाएँ या एक स्थिर फ़्रेम दिखाएँ (MDN)।
• लूप सीमित रखें। WCAG 2.2 SC 2.2.2 के अनुसार, दूसरे कंटेंट के साथ पाँच सेकंड से ज़्यादा चलने वाले ऑटोमैटिक मोशन को pause, stop या hide करने का तरीका होना चाहिए (W3C)। कुछ cycle के बाद लूप रोक दें, या दिखने वाला pause कंट्रोल दें।

Overlay में sparkles या lightning जैसे तेज़ flashing इफ़ेक्ट से बचें; WCAG किसी भी एक सेकंड में तीन से ज़्यादा flash की अनुमति नहीं देता। पूरी checklist के लिए accessible एनिमेशन और मोशन कम करें देखें।

ओवरले को पेज धीमा करने से कैसे रोकें?

• सिर्फ़ transform और opacity से मूव करें। अगर आप CSS में overlay की position एनिमेट करते हैं, तो top या left की जगह transform इस्तेमाल करें; web.dev के अनुसार transform और opacity compositor पर ही रहते हैं (web.dev)।
• स्क्रीन से बाहर की चीज़ें pause करें। जब overlay स्क्रोल होकर view से बाहर जाए, तो IntersectionObserver से video.pause() या Rive instance का pause() कॉल करें, और वापस आने पर उसे फिर से चलाएँ।
• WebGL context शेयर करें। ब्राउज़र हर पेज पर WebGL context की संख्या सीमित रखते हैं। अगर एक पेज पर @rive-app/webgl2 वाले कई Rive overlay हैं, तो useOffscreenRenderer: true सेट करें ताकि वे एक ही context शेयर करें (Rive)।
• Cleanup करें। जिन Rive instances को आप हटाते हैं उन पर cleanup() कॉल करें, खासकर उन single-page ऐप में जो views को mount और unmount करते हैं।
• वीडियो का वज़न देखें। HEVC-alpha फ़ाइलें VP9 वाली फ़ाइलों से काफ़ी बड़ी होती हैं, इसलिए ट्रांसपेरेंट क्लिप छोटी रखें और उनके display box के हिसाब से साइज़ करें।

हर पेड प्लान पर Charmotion एक ही कैरेक्टर दोनों रूपों में देता है: इंटरैक्टिव ओवरले के लिए एक .riv, और प्री-रेंडर्ड वाले के लिए ट्रांसपेरेंट WebM और MOV फ़ाइलें, जो उसी सेट से ज़रूरत पर एक्सपोर्ट होती हैं, ताकि आप हर जगह के हिसाब से चुन सकें।

कंटेंट के ऊपर ट्रांसपेरेंट एनिमेशन कैसे लगाएँ

1. ट्रांसपेरेंट फ़ॉर्मेट चुनें. इंटरैक्टिव कैरेक्टर के लिए Rive फ़ाइल, या pre-rendered एनिमेशन के लिए HEVC-alpha .mov और VP9-alpha WebM की जोड़ी इस्तेमाल करें।
2. Stacking context बनाएँ. कंटेंट रखने वाले container पर position: relative और isolation: isolate सेट करें।
3. Overlay की position तय करें. Canvas या वीडियो को position: absolute बनाएँ, inset से anchor करें, और container के अंदर उसे z-index दें।
4. इनपुट को आर-पार जाने दें. वेब पर pointer-events: none और aria-hidden="true" जोड़ें, या SwiftUI में .allowsHitTesting(false)।
5. Responsive साइज़ रखें. Clamped width और aspect-ratio इस्तेमाल करें, और load पर Rive drawing surface का साइज़ सेट करें।
6. परफ़ॉर्मेंस और मोशन ट्यून करें. स्क्रीन से बाहर के overlay pause करें, Rive instances के बीच WebGL context शेयर करें, और मोशन कम करें सेटिंग पर overlay छिपाएँ या स्थिर करें।

अक्सर पूछे जाने वाले सवाल

Safari में मेरे ट्रांसपेरेंट WebM में काला बॉक्स क्यों दिखता है?

Safari WebM चलाता है लेकिन VP9 अल्फ़ा चैनल को छोड़ देता है, इसलिए ट्रांसपेरेंट हिस्से opaque दिखते हैं। Video element के अंदर पहले source के रूप में HEVC-with-alpha .mov जोड़ें; Safari उसे चुनता है, जबकि Chrome, Edge और Firefox उसे छोड़कर WebM इस्तेमाल करते हैं।

क्या Rive canvas डिफ़ॉल्ट रूप से ट्रांसपेरेंट होता है?

हाँ। Canvas सिर्फ़ आर्टबोर्ड का आर्टवर्क बनाता है, इसलिए जिन हिस्सों में fill नहीं है वहाँ पीछे का पेज दिखता है। अगर आपको solid बैकग्राउंड दिखे, तो या तो source फ़ाइल में आर्टबोर्ड पर ही fill है, या canvas element या उसके wrapper पर CSS background color सेट है।

एनिमेशन overlay के आर-पार क्लिक कैसे पहुँचाएँ?

CSS में overlay element पर pointer-events: none सेट करें। SwiftUI में .allowsHitTesting(false) इस्तेमाल करें। ध्यान दें कि इससे Rive के अपने pointer listeners भी बंद हो जाते हैं, इसलिए अगर कैरेक्टर को रिएक्ट करना है तो code से ट्रिगर के ज़रिए उसे चलाएँ। कोई भी इंटरैक्टिव हिस्सा अलग, छोटे element पर रखें।

क्या मैं किसी वीडियो के ऊपर ट्रांसपेरेंट एनिमेशन लगा सकता हूँ?

हाँ। दोनों को एक positioned container में रखें और absolutely positioned canvas या दूसरे video element से ट्रांसपेरेंट एनिमेशन को बैकग्राउंड वीडियो के ऊपर layer करें। Overlay को muted और सजावटी रखें, और battery व CPU बचाने के लिए viewport से बाहर जाने पर दोनों को pause करें।

इस गाइड से झटपट जवाब

• एनिमेशन overlay को क्लिक ब्लॉक करने से कैसे रोकें?

स्रोत

• Video with alpha transparency on the web, Jake Archibald
• New video policies for iOS, WebKit
• How to create high-performance CSS animations, web.dev
• Web (JS) runtime, Rive
• Canvas vs WebGL, Rive
• Understanding SC 2.2.2: Pause, Stop, Hide, W3C WAI
• Understanding SC 2.3.1: Three Flashes or Below Threshold, W3C WAI
• prefers-reduced-motion, MDN Web Docs