Add a glitch effect to your website

Sep 12, 2025

कैसे करना है

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

वेब एनीमेशन: कोई कोड आवश्यक नहीं है

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

[2 9]

फ़ाइलों को डाउनलोड करें इस ट्यूटोरियल के लिए।

[3 9] 01. अपने पृष्ठ के बॉडी टैग में कोड जोड़ें

Vintage's glitch effect is easy to reproduce if you know its secret — यदि आप इसके रहस्य को जानते हैं तो विंटेज का ग्लिच इफेक्ट पुन: उत्पन्न करना आसान है

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

 & lt; div id = "धारक" onmouseover = "glitch ()" & gt;
  & lt; div id = "glitch" & gt; & lt; / div & gt;
  वेब
  & lt; br & gt; उत्पाद-
  & lt; br & gt; आयन
& lt; / div & gt;

[3 9] 02. प्रदर्शन को स्टाइल करना

सामग्री Work Sans नामक Google फ़ॉन्ट्स से एक विशिष्ट टाइपफ़ेस का उपयोग करेगी। वहां से लिंक पकड़ो और इसे अपने सिर अनुभाग में रखें; फिर सीएसएस को या तो स्टाइल टैग या एक अलग सीएसएस फ़ाइल में जोड़ें। पृष्ठ को सफेद पाठ के साथ काला बनाया गया है और धारक को पाठ के लिए स्टाइल किया गया है।

 शरीर {
  पृष्ठभूमि: # 000;
  फ़ॉन्ट-परिवार: 'काम सैन्स', सैन्स-सेरिफ़;
  रंग: #fff;
}
#धारक {
  फ़ॉन्ट आकार: 6em;
  चौड़ाई: 500px;
  ऊंचाई: 300px;
  मार्जिन: 0 ऑटो;
  स्थिति: रिश्तेदार;
}

[3 9] 03. ग्लिच प्रदर्शित करना

गड़बड़ प्रभाव एक पृष्ठभूमि छवि होने जा रहा है जो सीधे पाठ के शीर्ष पर रखा गया है। यहां महत्वपूर्ण हिस्सा यह है कि यह अस्पष्टता को शून्य से कम करके अदृश्य बना दिया जाता है ताकि जब तक उपयोगकर्ता टेक्स्ट के साथ इंटरैक्ट नहीं हो जाता तब तक यह दिखाई नहीं दे रहा है।

 #glitch {
  स्थिति: पूर्ण;
  शीर्ष: 0;
  बाएं: 0;
  जेड-इंडेक्स: 10;
  चौड़ाई: 100%;
  ऊंचाई: 100%;
  पृष्ठभूमि: यूआरएल (glitch.gif);
  अस्पष्टता: 0;
}

[3 9] 04. सब कुछ पकड़ो

बॉडी सेक्शन के अंत में स्क्रिप्ट टैग जोड़ें और दस्तावेज़ में 'गड़बड़' div के लिए एक कैश संदर्भ बनाएं। फिर 'ओवर' नामित एक चर गलत पर सेट है। जब उपयोगकर्ता पाठ पर चलता है तो यह चालू और बंद हो जाएगा।

 var gl = document.getElementByid ("गड़बड़");
var over = false;

[3 9] 05. गड़बड़ चलाना

जब माउस पाठ पर चलता है तो गड़बड़ समारोह कहा जाता है। अगर गड़बड़ी नहीं चल रही है तो गड़बड़ी की दृश्यता चालू हो जाती है और इसे डेढ़ सेकंड के बाद बंद कर दिया जाता है। आप इसके साथ प्रयोग कर सकते हैं और इसे अधिक अप्रत्याशित करने के लिए एक यादृच्छिक संख्या का उपयोग कर सकते हैं।

 समारोह गड़बड़ () {
  अगर (ओवर == गलत) {
  gl.style.opacity = "1";
  Settimeout (फ़ंक्शन () {
  सामान्य ();
  }, 1500);
  }
}

[3 9] 06. सामान्यता पर वापस

गड़बड़ प्रभाव पर नहीं रहना चाहिए क्योंकि यह उपयोगकर्ता के लिए बहुत परेशान होगा, लेकिन एक इंटरैक्टिव तत्व के रूप में यह अच्छी तरह से काम करता है। यहां, कोड अस्पष्टता को शून्य पर रीसेट करता है ताकि यह पाठ के शीर्ष पर दिखाई न दे।

 समारोह सामान्य () {
  gl.style.opacity = "0";
}

[3 9] [9 7] अब न्यूयॉर्क जेनरेट करने के लिए अपना टिकट प्राप्त करें

तीन दिवसीय वेब डिजाइन घटना [9 7] न्यूयॉर्क जेनरेट करें

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

यह लेख मूल रूप से रचनात्मक वेब डिज़ाइन पत्रिका वेब डिज़ाइनर के अंक 270 में प्रकाशित किया गया था। यहां अंक 270 खरीदें या वेब डिजाइनर की सदस्यता लें ।

संबंधित आलेख:

इन जटिल फोटो फ़िल्टर के साथ गड़बड़ कला बनाएँ
जावास्क्रिप्ट के साथ एसवीजी एनिमेट करें
10 ग्रेट सीएसएस एनीमेशन संसाधन

Add a glitch effect to your website

कैसे करना है - सर्वाधिक लोकप्रिय लेख

How to turn off web notifications for Windows, macOS and Android

How to add energy to your life drawings

Paint expressive portrait art with ArtRage 5

Get started with GreenSock Animation Platform

How to draw a big cat with pastels

Download files for 3D World 232

आश्वस्त प्रतिबिंबों को कैसे पेंट करें

Create a game environment in Unreal Engine 4

श्रेणियाँ