एलिमेंटर मार्की: अनंत स्क्रॉलिंग टेक्स्ट, लोगो और टिकर

एक मार्की सामग्री है जो एक दिशा में लगातार स्क्रॉल करती है और कभी नहीं रुकती है: कोई तीर नहीं, कोई बिंदु नहीं, कोई स्लाइड सीमा नहीं पुरानी <marquee> एचटीएमएल टैग वर्षों से मृत है, लेकिन प्रभाव २०२१ के आसपास वापस आया और अब यह उन आधे एजेंसी साइटों पर है जिन्हें आप देखेंगे।

एलिमेंटर में एक बनाने के तीन तरीके: मुफ़्त लोगो के लिए लोगो स्लाइडर विजेट, द समाचार टिकर पाठ के लिए, या सीएसएस की लगभग बारह पंक्तियों के बारे में यदि आप इसे किसी ऐसी चीज़ पर चाहते हैं जिसे विजेट कवर नहीं करते हैं एक मार्की वास्तव में एक है हिंडोला विजेट स्टॉप हटा दिए जाने के साथ, यही कारण है कि तीन में से दो तरीके एक से शुरू होते हैं नीचे दिए गए सभी तीन, विस्तार के साथ जो यह तय करता है कि आपका लूप साफ या स्पष्ट रूप से स्नैप करता है।

एक चीज जो मार्की को टूटा हुआ दिखाती है

यहां से शुरू करें, क्योंकि यही कारण है कि अधिकांश हाथ से निर्मित मार्की गलत दिखते हैं।

एक मार्की सामग्री की एक पट्टी है जो ऑफ-स्क्रीन होने तक बाईं ओर स्लाइड करती है, फिर शुरू में वापस कूदती है यदि सामग्री की केवल एक प्रति है, तो आपको एक अंतर मिलता है पूंछ छोड़ देती है, और जब तक सिर फिर से गोल नहीं होता तब तक खाली जगह होती है।

फिक्स ट्रैक को डुप्लिकेट करना है दो समान प्रतियां साइड से, बिल्कुल एक कॉपी की चौड़ाई में एनिमेटेड जब एनीमेशन रीसेट होता है, तो कॉपी दो ठीक से बैठा होता है जहां कॉपी एक था, और कूद अदृश्य है।

यही है वह पूरी तकनीक है आपने देखा है कि हर मार्की सुचारू रूप से लूप कर रहा है, और हर एक जो हकलाता है वह नहीं है।

विधि 1: निःशुल्क लोगो स्लाइडर के साथ लोगो मार्की

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

1. पेज पर लोगो स्लाइडर खींचें और एक वैकल्पिक लिंक के साथ, पुनरावर्तक में अपने लोगो को एक-एक पंक्ति में जोड़ें।
2. हिंडोला सेटिंग्स खोलें और ऑटोप्ले चालू करें, फिर अनंत लूप।
3. ऑटोप्ले विलंब को ० पर सेट करें। यह स्विच है जो हिंडोला को मार्की में बदल देता है शून्य की देरी का मतलब है कि यह स्लाइड पर कभी नहीं रुकता है, इसलिए गति कदम के बजाय निरंतर हो जाती है।
4. गति को कुछ धीमी गति से सेट करें, ४००० से ६००० एमएमएस मार्कीज़ शांत के रूप में पढ़ते हैं जब वे आपकी अपेक्षा से धीमे होते हैं फास्ट वाले एक त्रुटि राज्य की तरह दिखते हैं।
5. तीर और डॉट्स बंद करें। मार्की पर नेविगेशन विरोधाभासी है; नेविगेट करने के लिए कुछ भी नहीं है।
6. पॉज़-ऑन-होवर बंद करें यदि आप इसे वास्तव में निरंतर चाहते हैं, या यदि लोगो क्लिक करने योग्य हैं तो इसे छोड़ दें।

स्लाइड-प्रति-दृश्य घनत्व को नियंत्रित करता है डेस्कटॉप पर छह, टैबलेट पर तीन, मोबाइल पर दो लोगो को सुपाठ्य रखता है एक को मत छोड़ो, क्योंकि एक समय में एक ही लोगो दिखाने वाला मार्की एक पट्टी के रूप में पढ़ना बंद कर देता है।

स्टाइल लोगो स्ट्रिप्स पर अधिक, ग्रेस्केल होवर उपचार सहित और बेमेल लोगो आकार को कैसे बाहर निकालना हैः लोगो हिंडोला वॉकथ्रू। मुक्त स्तर में और क्या बैठता है, देखें मुक्त हिंडोला विजेट टूटना.

विधि २: समाचार टिकर के साथ पाठ मार्की

स्क्रॉलिंग टेक्स्ट (घोषणाएं, हेडलाइंस, एक स्टॉक-टिकर स्ट्रिप) के लिए न्यूज टिकर विजेट उद्देश्य-निर्मित विकल्प है यह एक प्रो विजेट है।

यह उन चीजों को संभालता है जो एक हाथ से लुढ़का हुआ टेक्स्ट मार्की गलत हो जाता है: यह एक स्थिर सूची के बजाय एक पोस्ट क्वेरी से खींच सकता है, इसलिए एक “नवीनतम समाचार” टिकर खुद को अपडेट करता है, और इसमें बाईं ओर एक निश्चित लेबल ब्लॉक होता है जो सामग्री स्क्रॉल करते समय रहता है यह लेबल वह विवरण है जो टिकर को ड्रिफ्टिंग टेक्स्ट के बजाय टिकर के रूप में पढ़ता है।

विजेट की सेटिंग में दिशा, गति और विराम व्यवहार सेट करें दो चीजें करने योग्य हैंः

• होवर पर, पर रुकें। यदि सुर्खियाँ लिंक हैं, तो लोगों को एक स्थिर लक्ष्य की आवश्यकता होती है।
• आइटम को छोटा रखें। ९०-अक्षर सुर्खियों के साथ एक टिकर चक्र के लिए इतना लंबा लगता है कि कोई भी आइटम चार नहीं देखता है लगभग ५० वर्णों में काट लें।

यदि आप वास्तव में स्क्रॉल के बिना टेक्स्ट को स्थानांतरित करना चाहते हैं, तो एक शीर्षक जहां शब्द अपनी जगह पर घूमते हैं, एनिमेटेड हेडलाइंस विजेट किसी भी मार्की की तुलना में अधिक फिट है।

विधि ३: सीएसएस के साथ एक का निर्माण करें

विजेट कवर नहीं करते हैं कुछ भी के लिए (प्रशंसापत्र उद्धरण की एक पट्टी, आइकन की एक पंक्ति, मिश्रित सामग्री) एक मार्की सीएसएस की बारह लाइनें है एक एचटीएमएल विजेट में मार्कअप और एलिमेंट के कस्टम सीएसएस फ़ील्ड या अपने बच्चे के विषय में सीएसएस डाल दिया।

<div class="ma-marquee">
  <div class="ma-marquee__track">
    <span>Item one</span><span>Item two</span><span>Item three</span>
    <span>Item one</span><span>Item two</span><span>Item three</span>
  </div>
</div>

ध्यान दें सामग्री दो बार दिखाई देती है वह पहले से डुप्लिकेट ट्रैक है, कॉपी-पेस्ट गलती नहीं है।

.ma-marquee {
  overflow: hidden;
}
.ma-marquee__track {
  display: flex;
  gap: 3rem;
  width: max-content;
  animation: ma-scroll 30s linear infinite;
}
.ma-marquee:hover .ma-marquee__track {
  animation-play-state: paused;
}
@keyframes ma-scroll {
  to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .ma-marquee__track { animation: none; }
}

वहां चार चीजें मायने रखती हैंः

• translateX(-50%) ट्रैक को बिल्कुल एक कॉपी की चौड़ाई से ले जाता है, क्योंकि ट्रैक दो प्रतियां है यह वही है जो लूप को अदृश्य बनाता है।
• linear, नहीं ease। एक आसान मार्की हर चक्र को गति देता है और धीमा कर देता है, जो एक बग जैसा दिखता है।
• width: max-content फ्लेक्स ट्रैक रैपिंग को रोकता है।
• कम-गति क्वेरी वैकल्पिक नहीं है निरंतर क्षैतिज गति एक दस्तावेज माइग्रेन और वेस्टिबुलर ट्रिगर है, और एक मार्की आधुनिक वेब पर एकल सबसे आम अपराधी है सेटिंग का सम्मान करें।

दिशा को उलटने के लिए, से चेतन translateX(-50%) को 0. ऊर्ध्वाधर के लिए, पर स्वैप करें translateY और कंटेनर की ऊंचाई निर्धारित करें।

मार्की को कितनी तेजी से चलना चाहिए?

वृत्ति से धीमा कहता है एक अच्छा प्रारंभिक बिंदु छह-आइटम ट्रैक के एक पूर्ण चक्र के लिए ३० सेकंड है, जो संपादक में लगभग बहुत धीमा लगता है और लाइव पेज पर आत्मविश्वास के रूप में पढ़ता है।

परीक्षण: क्या कोई आगंतुक अपनी आंखों से इसे ट्रैक किए बिना एक आइटम पढ़ सकता है यदि उन्हें आंदोलन का पालन करना है, तो यह बहुत तेज़ है, और पूरी पट्टी दूर देखने के लिए कुछ बन जाती है।

लोगो पाठ की तुलना में तेजी से जा सकते हैं, क्योंकि लोगो को पढ़ने के बजाय पहचाना जाता है। पाठ को रुकने के समय से लगभग दोगुना की आवश्यकता होती है। एक चरणबद्ध हिंडोला विपरीत मामला है, जहां ऑटोप्ले आमतौर पर एक गलती है क्योंकि आइटम क्लिक करने योग्य हैं।

क्या एसईओ या पहुंच के लिए एक मार्की खराब है?

एसईओ, नहीं सामग्री डोम में वास्तविक पाठ है, क्रॉल करने योग्य और अनुक्रमणीय ट्रैक को डुप्लिकेट करने का मतलब है कि पाठ स्रोत में दो बार दिखाई देता है, जो जागरूक होने के लायक है लेकिन इस पैमाने पर डुप्लिकेट-सामग्री समस्या नहीं है, क्योंकि यह एक तत्व के अंदर मुट्ठी भर शब्द है, तो दूसरी प्रति को चिह्नित करें aria-hidden="true", जो आपको वैसे भी करना चाहिए।

पहुंच वास्तविक विचार है, और तीन वास्तविक मुद्दे हैंः

• गति संवेदनशीलता। उपरोक्त कम-गति क्वेरी द्वारा नियंत्रित। गैर-परक्राम्य।
• मूविंग लिंक लक्ष्य। यदि आइटम क्लिक करने योग्य हैं, तो होवर पर और फोकस पर रोकें एक लिंक जो दूर स्लाइड करता है क्योंकि कोई इसके लिए पहुंचता है, डब्ल्यूसीएजी २.२ की लक्ष्य-आकार की अपेक्षाओं को आत्मा में विफल करता है यदि पत्र में नहीं।
• स्क्रीन रीडर इसे दो बार पढ़ रहे हैं। डुप्लिकेट ट्रैक दो बार घोषित किया जाता है जब तक कि आप पहुंच वृक्ष से दूसरी प्रति छिपाते हैं एक विशेषता इसे ठीक करती है।

इनमें से कोई भी मार्की को बुरा विचार नहीं बनाता है यह एक अपुष्ट व्यक्ति को एक बुरा विचार बनाता है।

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

किस विधि का उपयोग करना है

लोगो: मुफ्त लोगो स्लाइडर, ऑटोप्ले देरी शून्य दो मिनट में किया गया और यह आपके लिए उत्तरदायी घनत्व को संभालता है।

बीस में से कोई नहीं विजेट बिल्डर डिज़ाइन एक मार्की है, इसलिए लोगो स्लाइडर इस कार्य के लिए उपकरण बना हुआ है। द मूल्य निर्धारण पृष्ठ यदि आप उद्देश्य-निर्मित संस्करण चाहते हैं तो दिखाता है कि न्यूज़ टिकर कहाँ बैठता है।

स्क्रॉलिंग हेडलाइंस: समाचार टिकर, क्योंकि क्वेरी स्रोत और निश्चित लेबल अपने आप में लाइसेंस के लायक हैं।

कुछ और: सीएसएस यह छोटा है, यह तुम्हारा है, और कुछ भी इसे बहिष्कृत नहीं कर सकता स्टैंडअलोन स्लाइडर बिल्डर्स भी निरंतर ट्रैक कर सकते हैं, और स्लाइडर प्लगइन तुलना कवर करता है कि वे पृष्ठ की लागत क्या है।

मार्की ड्यूटी करने वाले विजेट सहित सभी हिंडोला और स्लाइडर विजेट एकत्र किए जाते हैं एलिमेंटर हिंडोला विजेट पेज, साथ में २० आयात करने योग्य हिंडोला और स्लाइडर डिजाइनउनमें से ८ मुक्त यदि आपका मार्की कैशिंग प्लगइन अपडेट के बाद दुर्व्यवहार कर रहा है, तो ठीक हो जाता है स्विपर स्लाइडर समस्या निवारण गाइड यहां भी करें आवेदन।