अपनी वेबसाइट पर एक गड़बड़ प्रभाव जोड़ें

विषय

• 01. अपने पेज के बॉडी टैग में कोड जोड़ें
• 02. डिस्प्ले को स्टाइल करना
• 03. गड़बड़ी प्रदर्शित करना
• 04. सब कुछ पकड़ो
• 05. गड़बड़ चल रहा है
• 06. सामान्यता पर वापस जाएं
• जनरेट न्यू यॉर्क के लिए अभी अपना टिकट प्राप्त करें

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

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

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

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

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

01. अपने पेज के बॉडी टैग में कोड जोड़ें

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

डिव आईडी = "होल्डर" ऑनमाउसओवर = "ग्लिच ()"> डिव आईडी = "ग्लिच"> / डिव> वेब बीआर> उत्पाद- बीआर> आयन / डिव>

02. डिस्प्ले को स्टाइल करना

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

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

03. गड़बड़ी प्रदर्शित करना

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

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

04. सब कुछ पकड़ो

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

var gl = document.getElementById ("गड़बड़"); वर ओवर = झूठा;

05. गड़बड़ चल रहा है

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

फंक्शन ग्लिच () { अगर (ओवर == फॉल्स) {gl.style.opacity = "1"; सेटटाइमआउट (फ़ंक्शन () {सामान्य ();}, 1500); } }

06. सामान्यता पर वापस जाएं

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

फ़ंक्शन सामान्य () {gl.style.opacity = "0"; }

जनरेट न्यू यॉर्क के लिए अभी अपना टिकट प्राप्त करें

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

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