आपकी साइट पर एक गतिशील इंटरफ़ेस उपयोगकर्ताओं का ध्यान आकर्षित करेगा और ट्रैफ़िक बढ़ाएगा। किसी वेबसाइट के लिए एनिमेटेड हेडर बनाना उतना मुश्किल नहीं है जितना पहली नज़र में लगता है।
अनुदेश
चरण 1
आइए एक एनिमेटेड हेडर बनाने का प्रयास करें, जो माउस कर्सर के ऊपर मंडराने पर इसके कॉन्फ़िगरेशन को बदल देगा। उदाहरण के लिए, एक शीर्षलेख में एक श्वेत-श्याम चित्र अंतःक्रिया पर रंग में परिवर्तित हो गया था या दूसरे में बदल गया था।
चरण दो
आधिकारिक वेबसाइट (jquery.com) से डाउनलोड करने के बाद अपने कंप्यूटर पर jQuery लाइब्रेरी स्थापित करें।
चरण 3
स्क्रिप्ट टैग का उपयोग करके लाइब्रेरी को हेड टैग के बीच अपनी html फ़ाइल से लिंक करें:
चरण 4
दो चित्रों का चयन करें जो उपयोगकर्ता द्वारा हेडर के साथ इंटरैक्ट करने पर एक दूसरे को बदल देंगे। यदि आप काले और सफेद से रंग में संक्रमण करना चाहते हैं, तो चित्र की एक प्रति बनाएं और इसे फ़ोटोशॉप में डिसैचुरेट करें।
चरण 5
HTML-दस्तावेज़ में दो वस्तुओं की एक सूची बनाएं और छवि टैग का उपयोग करके प्रत्येक को चित्र संलग्न करें। सूची में ही शैली वर्ग लागू करें, उदाहरण के लिए
चरण 6
इसे उस डिव में करें जो आपके साइट हेडर के लिए जिम्मेदार है। सबसे पहले, उस छवि का पता निर्दिष्ट करें जिसे स्थिर स्थिति में प्रतिबिंबित किया जाना चाहिए, और फिर वह जो होवर पर दिखाई देता है।
चरण 7
पहली तस्वीर में class = "pervaya" और दूसरी तस्वीर में class: "vtoraya" जोड़ें।
चरण 8
संलग्न सीएसएस फ़ाइल में, इन वर्गों के लिए तत्वों की पूर्ण स्थिति (स्थिति: पूर्ण;), निश्चित ऊंचाई और चौड़ाई (ऊंचाई और चौड़ाई) निर्दिष्ट करें।
चरण 9
चित्रों को एक दूसरे के ऊपर परत करें। इसके लिए z-index स्टाइल का इस्तेमाल करें। यह आपको z-अक्ष के साथ तत्वों को संरेखित करने की अनुमति देता है, जो स्क्रीन की गहराई में हमसे दूर जाता है।
चरण 10
सूची के लिए, इंडेंटेशन निर्दिष्ट करें, आपको आवश्यक संरेखण और सूची आइटम हटा दें (सूची-शैली-प्रकार: कोई नहीं;)।
चरण 11
एक.js फ़ाइल बनाएँ और उसमें निम्न कोड पेस्ट करें:
$ (दस्तावेज़).रेडी (फ़ंक्शन () {
$ ("img.ग्रे")। होवर (समारोह () {
$ (यह).stop ()। चेतन ({"अस्पष्टता": "0"}, "धीमा");
}, समारोह () {
$ (यह).stop ()। चेतन ({"अस्पष्टता": "1"}, "धीमा");
});
});
चरण 12
यह कोड आपके हेडर को एक्शन में एनिमेट करेगा।.js फ़ाइल को html दस्तावेज़ से कनेक्ट करना न भूलें।
