आपल्या वेबसाइटवर एक गोंधळ प्रभाव जोडा

सामग्री

• 01. आपल्या पृष्ठाच्या मुख्य टॅगमध्ये कोड जोडा
• 02. प्रदर्शन स्टाईलिंग
• 03. गोंधळ प्रदर्शित करणे
• 04. सर्वकाही धरा
• 05. गोंधळ चालवणे
• 06. सामान्यतेकडे परत
• आता न्यूयॉर्क व्युत्पन्न करण्यासाठी आपले तिकिट मिळवा

लक्ष वेधून घेण्याचा एक चांगला मार्ग - आणि तो धरून ठेवणे - एक वेबसाइट लेआउट तयार करणे आहे जे आपल्या प्रतिभेचे प्रदर्शन प्रदर्शित करते (एक सभ्य वेबसाइट बिल्डर त्या बिल्डमध्ये मदत करू शकते). युक्रेनची वेब एजन्सी व्हिन्टेजची साइट हे त्याचे उत्कृष्ट उदाहरण आहे, जे आपण काचेच्या कणांपासून बनविलेले स्पंदित लोगो आणि होवरवर सक्रिय होणार्‍या सुंदर गोंधळाच्या आकर्षक डोळ्यासह त्याच्या व्हीआर डिझाइन पोर्टफोलिओमध्ये ओढत आहे.

• वेब अ‍ॅनिमेशन: कोड आवश्यक नाही

थोड्या वेळाने वापरल्या जाणार्‍या साधा अडचण आपल्या साइटला व्हिज्युअल स्वारस्यास थोडासा अतिरिक्त व्याज देऊ शकते आणि अंमलात आणणे आश्चर्यकारकपणे सोपे आहे. हे कसे करावे ते येथे आहे.

मनात एक जटिल वेबसाइट मिळाली? आपले वेब होस्टिंग कार्य करत असल्याचे सुनिश्चित करा. आणि मेघ संचयनात आपल्या डिझाइन फायली सुरक्षित ठेवा.

फायली डाउनलोड करा या ट्यूटोरियल साठी.

01. आपल्या पृष्ठाच्या मुख्य टॅगमध्ये कोड जोडा

एक साधा अडचण निर्माण करणे बर्‍याच वेगवेगळ्या मार्गांनी केले जाऊ शकते. येथे आम्ही मजकूराच्या वरच्या बाजूला अ‍ॅनिमेटेड जीआयएफ ठेवून हे करणार आहोत, जे प्रदर्शनात चालू आणि बंद केले जाईल. प्रथम, आपल्या पृष्ठाच्या मुख्य टॅगमध्ये हा कोड जोडा.

डिव्ह आयडी = "धारक" ऑनमाउसओव्हर = "ग्लिच ()"> डिव्ह आयडी = "ग्लिच" </ div> वेब बीआर> प्रोडक्ट- बीआर> आयओएन / डिव्ह>

02. प्रदर्शन स्टाईलिंग

सामग्री वर्क सन्स नावाच्या Google फॉन्टमधील विशिष्ट टाइपफेस वापरेल. तेथून दुवा हस्तगत करा आणि आपल्या मस्तक विभागात ठेवा; नंतर सीएसएस एकतर स्टाईल टॅग किंवा वेगळ्या सीएसएस फाइलमध्ये जोडा. पृष्ठ पांढर्‍या मजकुरासह काळा बनविले आहे आणि त्या धारकास मजकूरासाठी स्टाईल केले आहे.

मुख्य पृष्ठ {पार्श्वभूमी: # 000; फॉन्ट-फॅमिली: ’वर्क सन्स’, सेन्स-सेरिफ; रंग: # एफएफ; ; # धारक {फॉन्ट आकार: 6 एएम; रुंदी: 500px; उंची: 300px; समास: 0 ऑटो; स्थिती: सापेक्ष; }

03. गोंधळ प्रदर्शित करणे

ग्लिच इफेक्ट मजकूराच्या शीर्षस्थानी थेट पार्श्वभूमी प्रतिमा असणार आहे. येथे महत्त्वाचा भाग असा आहे की अस्पष्टता शून्यावर कमी करुन अदृश्य केली जाते जेणेकरून वापरकर्त्याने मजकूराशी संवाद साधत नाही तोपर्यंत तो दर्शविला जाणार नाही.

#glitch {स्थिती: परिपूर्ण; शीर्ष: 0; डावा: 0; झेड-अनुक्रमणिका: 10; रुंदी: 100%; उंची: 100%; पार्श्वभूमी: url (glitch.gif); अस्पष्टता: 0; }

04. सर्वकाही धरा

मुख्य भागाच्या शेवटी स्क्रिप्ट टॅग जोडा आणि कागदजत्रातील ‘ग्लिच’ डीव्हीचा कॅश्ड संदर्भ तयार करा. मग ‘ओव्हर’ नावाचे व्हेरिएबल असत्य वर सेट केले जाते. जेव्हा वापरकर्ता मजकूरावर फिरतो तेव्हा ते चालू आणि बंद होईल.

var gl = document.getElementById ("ग्लिच"); var over = खोटे;

05. गोंधळ चालवणे

जेव्हा माउस मजकूरावर हलतो तेव्हा ग्लिच फंक्शन म्हटले जाते. जर ग्लिच चालू नसेल तर ग्लिच दृश्यमानता चालू होईल आणि दीड सेकंदा नंतर ती बंद होईल.आपण यासह प्रयोग करू शकता आणि अधिक अविश्वसनीय बनविण्यासाठी यादृच्छिक क्रमांकाचा वापर करू शकता.

फंक्शन ग्लिच () {if (over == खोटे) {gl.style.opacity = "1"; सेटटाइमआउट (फंक्शन () {सामान्य ();}, 1500); }}

06. सामान्यतेकडे परत

गोंधळाचा प्रभाव कायम राहू नये कारण तो वापरकर्त्यास त्रास देईल, परंतु परस्परसंवादी घटक म्हणून तो कार्य करतो. येथे, कोड अस्पष्टता पुन्हा शून्यावर परत रीसेट करतो जेणेकरून मजकूराच्या शीर्षस्थानी तो दृश्यमान होणार नाही.

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

आता न्यूयॉर्क व्युत्पन्न करण्यासाठी आपले तिकिट मिळवा

तीन-दिवसीय वेब डिझाइन इव्हेंट जनरेट न्यूयॉर्क परत आला आहे. 25-27 एप्रिल 2018 दरम्यान हेडलाईन स्पीकर्समध्ये सुपरफ्रेंडलीचा डॅन मॉल, वेब अ‍ॅनिमेशन सल्लागार वॅल हेड, फुल स्टॅक जावास्क्रिप्ट डेव्हलपर वेस बॉस आणि बरेच काही समाविष्ट आहे. कार्यशाळा आणि नेटवर्किंगच्या मौल्यवान संधींचा एक पूर्ण दिवस देखील आहे - गमावू नका. आता आपले व्युत्पन्न तिकिट मिळवा.

हा लेख मूळतः क्रिएटिव्ह वेब डिझाइन मॅगझिन वेब डिझायनरच्या अंक 270 मध्ये प्रकाशित झाला आहे. येथे अंक 270 खरेदी करा किंवा येथे वेब डिझायनरची सदस्यता घ्या.