टास्क पथ / इनपुट से परिणाम तक
CSS टेक्स्ट ग्लिच इफ़ेक्ट कैसे बनाएं
- 01
पूर्वावलोकन टेक्स्ट लिखें
पूर्वावलोकन टेक्स्ट में 1–32 अक्षर डालें — लेबल के बगल का काउंटर लंबाई ट्रैक करता है। छोटे, चौड़े शब्द परतें बिखरने लगने पर सबसे अच्छे पढ़े जाते हैं।
- 02
तीनों रंग सेट करें
टेक्स्ट रंग बेस परत पेंट करता है, जबकि सायन चैनल और रेड चैनल वे ऑफ़सेट प्रतिकृतियां हैं जो क्रोमैटिक फ्रिंज बनाती हैं। शुद्ध सायन और लाल के करीब चैनल क्लासिक क्रोमैटिक लुक देते हैं; मंद चैनल ज़्यादा सूक्ष्म, आधुनिक विभाजन बनाते हैं।
- 03
ग्लिच मोशन ट्यून करें
लेयर ऑफ़सेट (1–12 px) तय करता है कि प्रतिकृतियां कितनी दूर बहती हैं, और चक्र अवधि (0.2–3 s) लूप की रफ़्तार तय करती है। पूर्वावलोकन तीनों परतों को लाइव मंचित करता है।
- 04
तीनों परतों को समझें
बेस एलिमेंट आपका टेक्स्ट रंग रखता है, जबकि सायन प्रतिकृति लाइन के ऊपरी हिस्से तक और लाल प्रतिकृति निचले हिस्से तक क्लिप होती है। हर प्रतिकृति steps(2, end) एनिमेशन चलाती है — चिकनी स्लाइड के बजाय कड़ी छलांगें — यही ग्लिच को सिग्नल इंटरफ़ेयरेंस जैसा महसूस कराता है।
- 05
ग्लिच CSS कॉपी करें
toolars-text-glitch.css सहेजने के लिए CSS कॉपी करें या .css डाउनलोड करें दबाएं। एक्सपोर्ट में prefers-reduced-motion ब्लॉक शामिल है जो मोशन-संवेदनशील विज़िटर के लिए स्थिर फ्रिंज बनाए रखता है। आउटपुट पैनल लाइव बाइट गिनती दिखाता है, और टेक्स्ट वैलिडेशन पास न करने तक दोनों ऐक्शन बंद रहते हैं।
- 06
data-text एट्रिब्यूट जोड़ें
प्रतिकृतियां अपना कंटेंट attr(data-text) से पढ़ती हैं, इसलिए आपके एलिमेंट को अपने दृश्यमान टेक्स्ट के समान data-text एट्रिब्यूट चाहिए। जब बाद में टेक्स्ट बदले, दोनों अपडेट करें — एट्रिब्यूट ही वह है जिसे सायन और लाल परतें असल में पेंट करती हैं। एट्रिब्यूट उसी एलिमेंट पर रहता है जिस पर क्लास है, इसलिए पूरा इफ़ेक्ट एक ही टैग रहता है।