वेबसाइट हेडर में एनिमेटेड लोगो कैसे जोड़ें

हेडर लोगो के लिए कौन सा format इस्तेमाल करें?

हेडर का लोगो छोटा होता है, हर पेज पर दिखता है और navigation के पास रहता है, इसलिए format हल्का और मोशन छोटा होना चाहिए।

GIF सिर्फ़ 256 रंगों की palette और पूरी या बिल्कुल नहीं वाली transparency तक सीमित है, इसलिए नरम किनारे और परछाइयाँ उस खास बैकग्राउंड को छोड़कर, जिस पर उन्हें एक्सपोर्ट किया गया था, हर जगह टेढ़े-मेढ़े दिखते हैं (MDN)। यह भारी भी है: web.dev के एक उदाहरण में 3.7 MB का GIF, 551 KB का MP4 और 341 KB का WebM बन गया (web.dev)।

ट्रांसपेरेंट वीडियो के लिए Safari को alpha वाला HEVC चाहिए और Chromium व Firefox को alpha वाला VP9; encoding के बारे में ट्रांसपेरेंट वीडियो गाइड में बताया गया है।

मेरा GIF लोगो स्थिर इमेज की तरह क्यों दिखता है?

आमतौर पर इसलिए कि आपके अपलोड और पेज के बीच किसी चीज़ ने उसे convert कर दिया। कई theme logo pickers और image pipelines upload को resize करके JPEG, PNG या WebP जैसे स्थिर format में फिर से encode कर देते हैं और सिर्फ़ पहला फ़्रेम रखते हैं। अपने ब्राउज़र के developer tools में rendered <img> का source देखें: अगर URL अब .gif पर खत्म नहीं होता, या उसमें resize parameters हैं, तो एनिमेशन हटा दिया गया है।

दूसरे आम कारण:

• GIF को एक बार चलने के लिए एक्सपोर्ट किया गया था और आपके देखने से पहले वह खत्म हो गया। जाँचने के लिए reload करें।
• CSS बैकग्राउंड या object-fit wrapper GIF की जगह fallback image दिखा रहा है।
• कुछ ब्राउज़र या extensions में मोशन कम करने की सेटिंग एनिमेटेड इमेज को रोक देती है।

Logo picker से जूझने की बजाय एनिमेशन को खुद हेडर markup में रखें: custom code block, theme section या header template में। इससे आप वीडियो या Rive file पर भी जा सकते हैं, जो GIF से बेहतर दिखते हैं और हल्के होते हैं।

लोगो एनिमेशन को एक बार चलाकर स्थिर कैसे रखें?

वीडियो में loop न लगाएँ। खत्म हुआ वीडियो अपने आखिरी फ़्रेम पर रुका रहता है, इसलिए आखिरी फ़्रेम को अपना स्थिर लोगो बनाएँ। Chrome और iOS Safari में muted, inline वीडियो को ऑटोप्ले की अनुमति है (MDN, WebKit), लेकिन इसे script से शुरू करें ताकि आप मोशन कम करें सेटिंग का सम्मान कर सकें:

<a href="/" class="logo" aria-label="Acme home">
  <video id="logo-anim" width="160" height="40" muted playsinline preload="auto"
         poster="/logo-still.png" aria-hidden="true">
    <source src="/logo.mov" type='video/quicktime; codecs="hvc1"'>
    <source src="/logo.webm" type="video/webm">
  </video>
</a>

<script>
const v = document.getElementById("logo-anim");
if (!matchMedia("(prefers-reduced-motion: reduce)").matches) {
  v.play().catch(() => {}); // blocked: the poster stays visible
}
</script>

Poster स्थिर लोगो है, इसलिए मोशन कम करें चुनने वाले, ऑटोप्ले block करने वाले या धीमे connection वाले सभी visitors को सही हेडर दिखता है। aria-label के ज़रिए link का accessible name बना रहता है।

Rive में ऐसी स्टेट मशीन इस्तेमाल करें जिसका intro idle स्टेट पर खत्म हो, और idle को हल्का या पूरी तरह स्थिर रखें। आप sessionStorage में एक flag store करके intro को सिर्फ़ visitor के पहले page view पर भी चला सकते हैं, ताकि हर navigation पर लोगो दोबारा न चले।

Charmotion के सेट में यह पैटर्न शामिल है: अपना लोगो अपलोड करें और .riv में एक लॉन्च इंट्रो होता है जो एक बार चलकर idle पर रुक जाता है, साथ में success जैसे वन-शॉट रिएक्शन जिन्हें आप पूरे हुए साइन-अप जैसे इवेंट पर चला सकते हैं (.riv हर पेड प्लान में शामिल है)।

Intro को पाँच सेकंड से काफ़ी कम रखें। WCAG 2.2 SC 2.2.2 के अनुसार दूसरे कंटेंट के साथ पाँच सेकंड से ज़्यादा चलने वाले automatic मोशन के लिए pause, stop या hide का तरीका होना ज़रूरी है (W3C), और लूप होता हेडर लोगो इसी श्रेणी में आता है।

हेडर लोगो को साफ़ और हल्का कैसे रखें?

• जगह पहले से तय करें। वीडियो या canvas पर width और height attributes सेट करें, या CSS में aspect-ratio, ताकि file load होने से पहले हेडर का layout बन जाए। Load के बाद size बदलने वाले elements लेआउट शिफ़्ट पैदा करते हैं, जिसे Core Web Vitals में CLS के रूप में मापा जाता है (web.dev)।
• Display size से दोगुने पर एक्सपोर्ट करें। 160 × 40 CSS pixels पर दिखने वाले लोगो को high-density screens के लिए लगभग 320 × 80 pixels चाहिए। यहाँ 1080 pixel का square वीडियो bandwidth की बर्बादी है।
• Clip छोटी करें। आमतौर पर एक से तीन सेकंड काफ़ी होते हैं। छोटी clips का साइज़ कम होता है।
• Rive canvas को उसके box के हिसाब से size करें। onLoad में resizeDrawingSurfaceToCanvas() call करें ताकि वेक्टर आर्ट device pixel ratio पर साफ़ render हो (Rive)।
• पेज को block न करें। Rive रनटाइम को asynchronously load करें; तैयार होने तक poster या स्थिर <img> उस जगह को भरता है।

हेडर को phone width पर भी test करें। कई sites mobile पर लोगो छोटा कर देती हैं; अगर उस size पर एनिमेशन की बारीकियाँ गायब हो जाएँ, तो वहाँ स्थिर लोगो दिखाएँ।

लोगो को hover या click पर रिएक्ट कैसे कराएँ?

Hover या click पर छोटा सा रिएक्शन लोगो को लगातार चलाए बिना जीवंत बना सकता है। इसे एक छोटे वन-शॉट तक सीमित रखें जो वापस स्थिर स्टेट पर लौट आए।

SVG लोगो के लिए :hover और :focus-visible पर CSS transition काफ़ी है, जैसे transform से हल्का scale या rotation। Rive लोगो के लिए Rive listeners पर निर्भर रहने की बजाय अपने event handlers से ट्रिगर फ़ायर करें, ताकि keyboard focus से भी यह चल सके:

const link = document.querySelector(".logo");
const reduce = matchMedia("(prefers-reduced-motion: reduce)");

function react() {
  if (reduce.matches) return;
  r.viewModelInstance?.trigger("success").trigger();
}
link.addEventListener("mouseenter", react);
link.addEventListener("focus", react);

यहाँ दिखाया गया ट्रिगर API, Rive का web Data Binding (autoBind: true) है; legacy इनपुट के साथ इसकी जगह ट्रिगर इनपुट पर fire() कॉल करें। रिएक्शन को rate-limit करें, जैसे हर कुछ सेकंड में एक बार, ताकि pointer को हेडर पर घुमाने से यह बार-बार न चले।

WCAG 2.2 SC 2.3.3 (Animation from Interactions, Level AAA) कहता है कि interaction से शुरू होने वाले मोशन को बंद किया जा सके, जब तक वह ज़रूरी न हो (W3C)। ज़्यादातर sites के लिए फ़ायर करने से पहले prefers-reduced-motion जाँचना इसे पूरा कर देता है। Rive स्टेट मशीन गाइड में ट्रिगर के बारे में विस्तार से बताया गया है।

Webflow, WordPress या Shopify में इसे कैसे जोड़ें?

सिद्धांत हर जगह एक ही है: एनिमेशन को लोगो अपलोड फ़ील्ड के ज़रिए नहीं, बल्कि header markup में रखें।

• Webflow में Rive का native सपोर्ट है। .riv फ़ाइल को Assets में अपलोड करें और Add > Media से Rive element को navbar में drag करें, फिर आर्टबोर्ड, स्टेट मशीन, fit और ऑटोप्ले सेटिंग चुनें (Rive)।
• WordPress: core Video block में Autoplay, Loop, Muted, Play inline और Poster सेटिंग्स होती हैं, इसलिए आप block theme के header template part में बिना code के एक बार चलने वाला header वीडियो बना सकते हैं (WordPress.org)। Rive के लिए, web runtime snippet को Custom HTML block में पेस्ट करें।
• Shopify में Rive या Lottie के लिए कोई native section नहीं है। अगर आपकी theme में Custom Liquid section है, तो आप वहाँ वीडियो या Rive markup जोड़ सकते हैं (Shopify); वरना theme code में header section को एडिट करना होगा।

हर प्लेटफ़ॉर्म के लिए अलग गाइड: Webflow, WordPress और Shopify।

वेबसाइट के header में एनिमेटेड लोगो कैसे जोड़ें

1. फ़ॉर्मेट चुनें. सरल वेक्टर मूवमेंट के लिए SVG, इंट्रो और रिएक्शन के लिए Rive फ़ाइल, या पहले से रेंडर किए गए ट्रांसपेरेंट लोगो के लिए HEVC .mov और VP9 WebM की जोड़ी इस्तेमाल करें। GIF से बचें।
2. सही साइज़ में एक्सपोर्ट करें. दिखाए जाने वाले CSS साइज़ से लगभग दोगुने साइज़ पर रेंडर करें, क्लिप को कुछ सेकंड तक सीमित रखें, और आखिरी फ़्रेम को स्थिर लोगो बनाएँ।
3. जगह रिज़र्व करें. वीडियो या canvas पर width और height या aspect-ratio सेट करें, ताकि लोड होते समय header खिसके नहीं।
4. script से एक बार चलाएँ. loop हटा दें, muted और playsinline जोड़ें, और play() तभी कॉल करें जब मोशन कम करने का अनुरोध न किया गया हो।
5. स्टैटिक fallback रखें. स्थिर लोगो को poster के रूप में इस्तेमाल करें, होम लिंक पर accessible name रखें, और मोबाइल width पर header जाँचें।

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

क्या एनिमेटेड header लोगो को लूप होना चाहिए?

आमतौर पर नहीं। जो लोगो एक बार चलकर रुक जाता है, वह navigation से होड़ किए बिना ध्यान खींचता है। WCAG 2.2 SC 2.2.2 के तहत, दूसरे कंटेंट के साथ पाँच सेकंड से लंबे लगातार मोशन के लिए pause, stop या hide करने का तरीका चाहिए, जिसे लोगो में जोड़ना मुश्किल होता है।

क्या मैं अपने लोगो के लिए एनिमेटेड SVG इस्तेमाल कर सकता हूँ?

हाँ, सरल मोशन वाले फ़्लैट वेक्टर लोगो के लिए, जैसे draw-on stroke या fade। जहाँ संभव हो transform और opacity को एनिमेट करें और मोशन को prefers-reduced-motion चेक में रखें। जटिल कैरेक्टर मोशन को Rive में बनाना और कंट्रोल करना आसान है।

क्या ऑटोप्ले होने वाला लोगो वीडियो iPhone पर चलेगा?

हाँ, अगर वह muted है और उसमें playsinline attribute है। iOS Safari सिर्फ़ उसी साइलेंट या muted वीडियो को ऑटोप्ले करता है जो स्क्रीन पर दिख रहा हो। अगर play() मना हो जाता है, तो poster image दिखती रहती है, इसलिए poster में अपना स्थिर लोगो सेट करें।

क्या एनिमेटेड लोगो से पेज की स्पीड घटती है?

नहीं, अगर वह छोटा है और उसकी जगह रिज़र्व है। डिस्प्ले साइज़ पर एक्सपोर्ट करें, क्लिप छोटी रखें, लेआउट शिफ़्ट से बचने के लिए width और height सेट करें, और Rive runtime या वीडियो को इस तरह लोड करें कि बाकी पेज ब्लॉक न हो।

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

• header लोगो एनिमेशन को एक बार कैसे चलाएँ?

स्रोत

• Image file type and format guide, MDN Web Docs
• Replace animated GIFs with video for faster page loads, web.dev
• Autoplay guide for media and Web Audio APIs, MDN Web Docs
• Understanding SC 2.2.2: Pause, Stop, Hide, W3C WAI
• Understanding SC 2.3.3: Animation from Interactions, W3C WAI
• Cumulative Layout Shift (CLS), web.dev
• Web (JS) runtime, Rive
• Rive is natively supported in Webflow, Rive