सीएसएस और जावास्क्रिप्ट के साथ अपनी वेबसाइट को उत्तरदायी और इंटरएक्टिव कैसे बनाएं

एक ऐसी वेबसाइट होना जो उत्तरदायी और इंटरैक्टिव दोनों हो, प्रत्येक वेबसाइट के मालिक के लिए एक अलिखित आवश्यकता है। किसी भी स्क्रीन आकार में पूरी तरह से समायोजित होने वाली एक इंटरैक्टिव वेबसाइट होने के लाभों को कम करके नहीं आंका जा सकता है।

आपको अपनी वेबसाइट पर आने वाले प्रत्येक उपयोगकर्ता के लिए एक व्यक्तिगत अनुभव बनाना चाहिए, और कई सीएसएस गुणों और कुछ जावास्क्रिप्ट कार्यों के साथ, आप बस ऐसा कर सकते हैं।

इस ट्यूटोरियल लेख में, आप सीखेंगे कि अपनी HTML और CSS वेबसाइट को उत्तरदायी और इंटरैक्टिव कैसे बनाया जाए।

अपनी वेबसाइट को इंटरएक्टिव बनाना

जब आप एक वेबसाइट बना रहे होते हैं, तो आप ऊपर से नीचे की ओर शुरू करते हैं। इसलिए, अपनी वेबसाइट को इंटरएक्टिव बनाना एक ऐसी प्रक्रिया है जो ऊपर से भी शुरू होनी चाहिए। लेना यह पोर्टफोलियो वेबसाइट हमने एक उदाहरण के रूप में बनाया है। इसमें एक साफ डिजाइन है लेकिन यह पूरी तरह से इंटरैक्टिव नहीं है।

जब आप उस पर होवर करते हैं तो प्रत्येक मेनू आइटम रंग बदलता है, लेकिन आप कैसे जानते हैं कि आप वेबसाइट के किस अनुभाग पर हैं? खैर, ऐसा करने के दो तरीके हैं—के साथ मेनू आइटम सक्रिय करें ऑनस्क्रॉल तथा क्लिक पर आयोजन।

हर बार जब आप किसी वेबसाइट को ऊपर या नीचे स्क्रॉल करते हैं तो मेनू आइटम को सक्रिय करने के लिए एक जावास्क्रिप्ट फ़ंक्शन के उपयोग की आवश्यकता होगी जिसे आप "activeMenu" कह सकते हैं। इस फ़ंक्शन को नेवबार में मेनू आइटम के साथ-साथ वेबसाइट के प्रत्येक अनुभाग तक पहुंच की आवश्यकता होगी। सौभाग्य से, आप इसका उपयोग करके इसे पूरा कर सकते हैं क्वेरी चयनकर्तासभी डोम चयनकर्ता।

अपनी परियोजना निर्देशिका में, आपको एक नई जावास्क्रिप्ट फ़ाइल बनानी होगी और कोड की निम्न पंक्ति का उपयोग करके इसे अपनी HTML फ़ाइल से लिंक करना होगा:

में लिपि टैग, द एसआरसी मान जावास्क्रिप्ट फ़ाइल का नाम है, जो ऊपर के उदाहरण में है main.js.

मुख्य.जेएस फ़ाइल

// मेनू आइटम ऑनस्क्रॉल को सक्रिय करने के लिए जावास्क्रिप्ट का उपयोग करना
const li = document.querySelectorAll(.links");
const sec = document.querySelectorAll ("सेक्शन");
फ़ंक्शन सक्रियमेनू () {
चलो लेन = सेकंड। लंबाई;
जबकि (--लेन && window.scrollY + 97 < सेकंड [लेन]। ऑफसेट टॉप) {}
li.forEach (ltx => ltx.classList.remove("active"));
ली [लेन]। क्लासलिस्ट। एड ("सक्रिय");
}
सक्रियमेनू ();
window.addEventListener ("स्क्रॉल", सक्रियमेनू);

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

ऊपर दिए गए कोड के काम करने के लिए आपको नेवबार सेक्शन में निम्नलिखित कोड को शामिल करने के लिए पोर्टफोलियो वेबसाइट स्टाइल शीट को अपडेट करना होगा:

#navbar .menu li.active a{
रंग: #fff;
}

मेनू आइटम सक्रिय करना ऑनक्लिक

 // मेनू आइटम ऑनक्लिक को सक्रिय करने के लिए jQuery का उपयोग करना
$ (दस्तावेज़)। पर ('क्लिक करें', 'ली', फ़ंक्शन() {
$(यह).addClass('active').siblings().removeClass('active')
})

उपरोक्त कोड को अपनी जावास्क्रिप्ट फ़ाइल में जोड़ने पर प्रत्येक अनुभाग सक्रिय हो जाएगा जब कोई उपयोगकर्ता उपयुक्त मेनू आइटम पर क्लिक करेगा। हालांकि, यह jQuery (एक जावास्क्रिप्ट लाइब्रेरी) का उपयोग करता है जो इस कार्य को पूरा करता है जिसमें न्यूनतम मात्रा में कोड होगा।

जब आप प्रत्येक मेनू आइटम को क्लिक पर सक्रिय करते हैं तो आपके सामने एक समस्या यह आ सकती है कि नेवबार प्रत्येक अनुभाग के शीर्ष भाग को कवर करेगा। इसे रोकने के लिए, आप बस स्टाइल शीट के उपयोगिता अनुभाग में निम्नलिखित कोड सम्मिलित कर सकते हैं:

अनुभाग{
स्क्रॉल-मार्जिन-टॉप: 4.5rem;
}

ऊपर दिया गया कोड यह सुनिश्चित करेगा कि जब आप क्लिक करके प्रत्येक अनुभाग में नेविगेट करेंगे, तो नेवबार प्रत्येक अनुभाग (या 72px) से 4.5rem ऊपर रहेगा। आपकी वेबसाइट में जोड़ने के लिए एक और बढ़िया विशेषता है चिकनी स्क्रॉलिंग, जिसे आप निम्नलिखित सीएसएस कोड के साथ पूरा कर सकते हैं:

एचटीएमएल {
स्क्रॉल-व्यवहार: चिकना;
}

अपने होम पेज को इंटरएक्टिव बनाना

अधिकांश वेबसाइटों पर, उपयोगकर्ता को नेवबार या होम पेज पर अपना पहला बटन दिखाई देगा। कॉल टू एक्शन की तरह दिखने के अलावा, एक बटन भी इंटरैक्टिव होना चाहिए। इसे पूरा करने का एक शानदार तरीका CSS है :होवर चयनकर्ता, जो हर बार उपयोगकर्ता के माउस के उस पर चलने पर एक तत्व को एक नया राज्य प्रदान करता है।

पोर्टफोलियो वेबसाइट पर, होम पेज पर एकमात्र लिंक है बीटीएन वर्ग (जो इसे एक बटन का रूप देता है)। तो, इस बटन को इंटरैक्टिव बनाने के लिए, आप बस असाइन कर सकते हैं :होवर के लिए चयनकर्ता बीटीएन कक्षा।

: होवर चयनकर्ता का उपयोग करना

 .बीटीएन: होवर{
पृष्ठभूमि: #fff;
रंग नीला;
सीमा: नीला ठोस;
सीमा-त्रिज्या: 5px;
}

ऊपर दिए गए कोड को पोर्टफोलियो वेबसाइट के यूटिलिटी सेक्शन में जोड़ने से बटन एक राज्य से दूसरे राज्य में तब बदल जाएगा जब आप उस पर होवर करेंगे।

होम पेज के लिए एक और बढ़िया फीचर टाइपिंग एनिमेशन है, जो उपयोग करता है typed.js (एक jQuery टाइपिंग एनीमेशन स्क्रिप्ट)।

typed.js. का उपयोग करना

// jQuery टाइपिंग टेक्स्ट एनिमेशन स्क्रिप्ट
वर टाइप किया हुआ = नया टाइप किया हुआ (".टाइपिंग", {
स्ट्रिंग्स: ["सॉफ़्टवेयर डेवलपर"],
टाइप स्पीड: 100,
बैकस्पीड: 60,
लूप: सच
});

उपरोक्त कोड को अपनी जावास्क्रिप्ट फ़ाइल में जोड़ने के बाद, आपको HTML में निम्नलिखित परिवर्तन करने होंगे:

और मैं हूँ 

ऊपर दिए गए कोड में आप "सॉफ्टवेयर डेवलपर" टेक्स्ट को मूल कोड में "टाइपिंग" क्लास से बदल देते हैं, जिससे टाइपिंग एनिमेशन बन जाता है।

अपनी वेबसाइट के अन्य अनुभागों को सहभागी बनाना

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

यदि आपकी वेबसाइट पर कोई गैलरी या कोई छवि अनुभाग है, तो आप अपनी छवियों पर होवर प्रभाव बनाने के लिए ऊपर वर्णित दो गुणों का उपयोग कर सकते हैं। पोर्टफोलियो वेबसाइट के प्रोजेक्ट सेक्शन में छवियों में निम्नलिखित सीएसएस कोड जोड़ने से अनुभाग में छवियों पर एक परिवर्तन प्रभाव पैदा होगा:

.img-कंटेनर img{
अधिकतम-चौड़ाई: 450px;
संक्रमण: सभी 0.3s आसानी से बाहर;
कर्सर: सूचक;
}
.img-कंटेनर img: होवर{
ट्रांसफॉर्म: स्केल (1.2);
}

अपनी वेबसाइट को उत्तरदायी बनाना

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

सम्बंधित: उत्तरदायी वेबसाइट बनाने के लिए HTML और CSS में मीडिया प्रश्नों का उपयोग कैसे करें

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

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

आपको दो अतिरिक्त CSS फाइलें बनाने की आवश्यकता होगी। पहली सीएसएस फ़ाइल लैंडस्केप मोड में छोटे लैपटॉप और टैबलेट के लिए लेआउट संरचना तैयार करेगी। इसकी अधिकतम चौड़ाई होगी 1100px, जैसा कि आप निम्न लिंक टैग में देखते हैं:

के भीतर उपरोक्त कोड की पंक्ति सम्मिलित करना सिर आपकी HTML फ़ाइल का टैग (या इस मामले में पोर्टफोलियो वेबसाइट फ़ाइल) यह सुनिश्चित करेगा कि स्क्रीन की चौड़ाई वाला प्रत्येक उपकरण 1100px और के अंतर्गत स्टाइल का उपयोग करेंगे वाइडस्क्रीन.सीएसएस फ़ाइल।

वाइडस्क्रीन.सीएसएस फ़ाइल

/* घर */
#navbar .container h1 a span{
कुछ भी डिस्प्ले मत करो;
}
#होम .होम-कंटेंट .टेक्स्ट-3 स्पैन{
रंग: #000000;
}
/* विभाग */
.परियोजनाएं{
औचित्य-सामग्री: केंद्र;
}
।परियोजना{
फ्लेक्स: 0;
}
/* के बारे में */
.के बारे में-सामग्री{
फ्लेक्स-दिशा: स्तंभ;
}
/* संपर्क */
संपर्क-सामग्री{
फ्लेक्स-दिशा: स्तंभ;
}

जैसा कि आप नीचे दिए गए आउटपुट में देख सकते हैं, उपरोक्त कोड 1100px और उससे कम के स्क्रीन आकार वाले उपकरणों पर एक प्रतिक्रियाशील लेआउट तैयार करेगा:

दूसरी सीएसएस फ़ाइल पोर्ट्रेट मोड में स्मार्टफोन और टैबलेट के लिए लेआउट संरचना तैयार करेगी। इसकी अधिकतम चौड़ाई होगी 760पीएक्स, जैसा कि आप निम्न लिंक टैग में देख सकते हैं:

Mobile.css फ़ाइल

/*नवबार*/
#navbar .container h1 a span{
कुछ भी डिस्प्ले मत करो;
}
#नवबार .कंटेनर .मेनू{
मार्जिन-बाएं: 0rem;
}
#हैम-मेनू{
चौड़ाई: 35 पीएक्स;
ऊंचाई: 30 पीएक्स;
मार्जिन: 30px 0 20px 20px;
कर्सर: सूचक;
}
#नवबार .कंटेनर .मेनू-रैप .मेनू{
कुछ भी डिस्प्ले मत करो;
}
।छड़{
ऊंचाई: 5 पीएक्स;
चौड़ाई: 100%;
पृष्ठभूमि-रंग: #ffffff;
प्रदर्शन क्षेत्र;
सीमा-त्रिज्या: 5px;
संक्रमण: 0.3s आसानी;
}
#बार1{
ट्रांसफॉर्म: ट्रांसलेट वाई (-4 पीएक्स);
}
#बार3{
ट्रांसफॉर्म: ट्रांसलेट वाई (4 पीएक्स);
}
/* घर */
#घर{
प्रदर्शन: फ्लेक्स;
पृष्ठभूमि: url("/images/home.jpg") नो-रिपीट सेंटर;
ऊंचाई: 100 वीएच;
}
#घर .कंटेनर{
मार्जिन: 6rem 1rem 2rem 1rem;
गद्दी: 2rem;
}
#होम .होम-कंटेंट .टेक्स्ट-1{
फ़ॉन्ट-आकार: 20px;
मार्जिन: 1.2rem;
}
#होम .होम-कंटेंट .टेक्स्ट-2{
फ़ॉन्ट-आकार: 45px;
फ़ॉन्ट-वजन: 500;
मार्जिन: 1rem;
}
#होम .होम-कंटेंट .टेक्स्ट-3{
फ़ॉन्ट-आकार: 22px;
मार्जिन: 1.2rem;
}
#होम .होम-कंटेंट .टेक्स्ट-3 स्पैन{
रंग: #0000ff;
फ़ॉन्ट-वजन: 600;
}
#घर .कंटेनर{
मार्जिन-बाएं: 4.5rem;
}
/* के बारे में */
#के बारे में .कंटेनर{
पैडिंग: 0;
}
/* संपर्क */
#संपर्क .कंटेनर{
पैडिंग: 0;
}

ऊपर दी गई फाइल निम्नलिखित उत्तरदायी स्मार्टफोन लेआउट का उत्पादन करेगी:

उत्तरदायी इंटरएक्टिव वेबसाइट बनाने के अन्य तरीके

CSS और HTML का उपयोग करके अपनी वेबसाइट को उत्तरदायी और इंटरैक्टिव बनाने का तरीका जानना एक बहुत अच्छा कौशल है। लेकिन आपकी वेबसाइट को रेस्पॉन्सिव और इंटरेक्टिव बनाने के लिए ये एकमात्र तरीके नहीं हैं।

जूमला जैसी सेवाओं पर कई फ्रंटएंड फ्रेमवर्क और यहां तक ​​​​कि टेम्प्लेट उत्तरदायी इंटरैक्टिव डिज़ाइन की सुविधा प्रदान करते हैं।

उत्तरदायी वेबसाइटों के लिए 15 स्टाइलिश जूमला टेम्पलेट्स

अपने व्यवसाय या ब्लॉग के लिए एक वेबसाइट बनाना चाहते हैं? इन जूमला टेम्पलेट्स को आज़माएं।

आगे पढ़िए

लेखक के बारे में