एक एनिमेटेड स्प्लिट-स्क्रीन लैंडिंग पृष्ठ बनाएं

विषय

• 01. सेट अप करें
• 02. HTML समाप्त करें
• 03. एसएएस चर का अन्वेषण करें
• 04. बॉडी स्टाइल को एडजस्ट करें
• 05. अनुभाग शीर्षकों को स्टाइल करें
• 06. सीटीए को विशिष्ट बनाएं
• 07. कंटेनर पृष्ठभूमि और स्क्रीन सेट करें
• 08. पृष्ठभूमि चित्र जोड़ें
• 09. संक्रमण और होवर प्रभाव जोड़ें
• 10. जावास्क्रिप्ट में ले जाएँ
• 11. एक वर्ग जोड़ें और हटाएं
• 12. इसे उत्तरदायी बनाएं

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

• इस ट्यूटोरियल के लिए काम कर रहे कोडपेन देखें

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

01. सेट अप करें

यदि आप कोडपेन का उपयोग कर रहे हैं, तो सुनिश्चित करें कि पेन सेटिंग में सीएसएस 'एससीएसएस' पर सेट है। आप सेटिंग टैब पर क्लिक करके यह परिवर्तन कर सकते हैं, 'सीएसएस' चुनें और ड्रॉप-डाउन विकल्पों में सीएसएस प्रीप्रोसेसर को एससीएसएस में बदलें।

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

div > अनुभाग > /अनुभाग> अनुभाग > /अनुभाग> /div>

02. HTML समाप्त करें

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

div > अनुभाग > h1> पुरुषों का फ़ैशन/h1> बटन> a href="#" >अधिक जानें/a> /बटन> /अनुभाग> अनुभाग > h1>महिला फैशन/h1> बटन> a href="#" >जानें अधिक/ए> /बटन> /अनुभाग>

03. एसएएस चर का अन्वेषण करें

Sass के बारे में हम सभी को जो एक चीज पसंद है, वह है चर का उपयोग। भले ही देशी CSS वेरिएबल को अधिक समर्थन मिल रहा हो, हम Sass का उपयोग करके चीजों को सुरक्षित रखेंगे। हम इन्हें अपने में सबसे ऊपर रखेंगे .एससीएसएस, और आप जो चाहें रंग चुन सकते हैं, लेकिन उपयोग कर सकते हैं आरजीबीए मूल्य हमें अधिक लचीलापन देंगे।

/** चर **/ $container-BgColor: #444; $बायां-बीजीकलर: आरजीबीए (136, 226, 247, 0.7); $ लेफ्ट-बटन-होवर: आरजीबीए (94, 226, 247, 0.7); $right-bgColor: rgba(227, 140, 219, 0.8); $राइट-बटन-होवर: rgba(255, 140, 219, 0.7); $ होवर-चौड़ाई: 75%; $ छोटी-चौड़ाई: 25%; $ एनिमेट स्पीड: 1000ms;

04. बॉडी स्टाइल को एडजस्ट करें

सबसे पहले, हम शरीर के सभी डिफ़ॉल्ट पैडिंग और मार्जिन को साफ़ कर देंगे और फिर फ़ॉन्ट परिवार को ओपन सैन्स पर सेट कर देंगे। यह केवल बटन को प्रभावित करेगा, इसलिए यह बहुत ज्यादा मायने नहीं रखता कि हम किस फ़ॉन्ट का उपयोग करते हैं। फिर हम चौड़ाई और ऊंचाई को पर सेट करेंगे 100% और सुनिश्चित करें कि एक्स अक्ष पर जो कुछ भी ओवरफ्लो होता है वह छिपा हो जाता है।

एचटीएमएल, बॉडी {पैडिंग: 0; मार्जिन: 0; फ़ॉन्ट-परिवार: 'ओपन सेन्स', सेन्स-सेरिफ़; चौड़ाई: 100%; ऊंचाई: 100%; अतिप्रवाह-एक्स: छिपा हुआ; }

05. अनुभाग शीर्षकों को स्टाइल करें

अनुभाग शीर्षकों के लिए Google फ़ॉन्ट चुनने का समय आ गया है - हमने Playfair Display को चुना है। फिर उपयोग करना अनुवादX हम यह सुनिश्चित कर सकते हैं कि अनुभाग शीर्षक हमेशा X अक्ष पर केंद्रित हों।

h1 {फ़ॉन्ट-आकार: 5rem; रंग: #ff; स्थिति: निरपेक्ष; बाएं: 50%; शीर्ष: 20%; ट्रांसफॉर्म: ट्रांसलेशनएक्स (-50%); व्हाइट-स्पेस: अब्रैप; फ़ॉन्ट-परिवार: 'प्लेफेयर डिस्प्ले', सेरिफ़; }

06. सीटीए को विशिष्ट बनाएं

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

.बटन {डिस्प्ले: ब्लॉक; स्थिति: निरपेक्ष; बाएं: 50%; शीर्ष: 50%; ऊंचाई: 2.6rem; पैडिंग-टॉप: 1.2rem; चौड़ाई: 15rem; पाठ-संरेखण: केंद्र; सफ़ेद रंग; सीमा: 3px ठोस #fff; सीमा-त्रिज्या: 4px; फ़ॉन्ट-वजन: 600; पाठ-रूपांतरण: अपरकेस; पाठ-सजावट: कोई नहीं; ट्रांसफॉर्म: ट्रांसलेशनएक्स (-50%); संक्रमण: सभी .2s;

मुख्य बटनों में एक अच्छा सरल होवर प्रभाव होगा और हम रंग के लिए निर्दिष्ट सैस चर का उपयोग करेंगे, जो पृष्ठ की पृष्ठभूमि के समान रंग होगा।

.स्क्रीन.बाएं .बटन: होवर {पृष्ठभूमि-रंग: $बाएं-बटन-होवर; सीमा-रंग: $बाएं-बटन-होवर; } .स्क्रीन.दायां। बटन: होवर {पृष्ठभूमि-रंग: $ दायां-बटन-होवर; सीमा-रंग: $ दायां-बटन-होवर;

07. कंटेनर पृष्ठभूमि और स्क्रीन सेट करें

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

कंटेनर {स्थिति: रिश्तेदार; चौड़ाई: 100%; ऊंचाई: 100%; पृष्ठभूमि: $कंटेनर-बीजीकलर; .स्क्रीन { स्थिति: निरपेक्ष; चौड़ाई: 50%; ऊंचाई: 100%; बहुत ज्यादा गोपनीय; } }

08. पृष्ठभूमि चित्र जोड़ें

बाएँ और दाएँ दोनों खंड एक छवि प्रदर्शित करेंगे, और आप Unsplash, Pixabay या Pexels (जिसका मैंने इस ट्यूटोरियल में उपयोग किया है) जैसी वेबसाइटों से रॉयल्टी-मुक्त स्टॉक चित्र पा सकते हैं। चीजों को आसान बनाने के लिए, मैंने imgbb नामक एक निःशुल्क छवि होस्टिंग और साझाकरण सेवा का उपयोग किया है जिसे हम अपने CSS में लिंक कर सकते हैं।

.स्क्रीन।बाएं {बाएं: 0; बैकग्राउंड: url ('https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp') सेंटर सेंटर नो-रिपीट; पृष्ठभूमि का आकार: कवर; &: से पहले {स्थिति: पूर्ण; सामग्री: ""; चौड़ाई: 100%; ऊंचाई: 100%; पृष्ठभूमि: $बायां-बीजीकलर; } }

पृष्ठ के दाईं ओर imgbb का उपयोग करके एक पृष्ठभूमि छवि भी प्रदर्शित होगी, और हम पृष्ठभूमि का रंग गुलाबी पर सेट करेंगे। फिर से, हम पृष्ठभूमि का आकार सेट करते हैं आवरण. यह हमें संपूर्ण युक्त तत्व को कवर करने की अनुमति देगा, जो हमारे मामले में है स्क्रीन कक्षा।

.स्क्रीन।दाएं {दाएं: 0; बैकग्राउंड: url ('https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp') सेंटर सेंटर नो-रिपीट; पृष्ठभूमि का आकार: कवर; &: से पहले {स्थिति: पूर्ण; सामग्री: ""; चौड़ाई: 100%; ऊंचाई: 100%; पृष्ठभूमि: $right-bgColor; } }

09. संक्रमण और होवर प्रभाव जोड़ें

दोनों स्क्रीन पर हमारे होवर प्रभाव के लिए एनीमेशन गति को एक संक्रमण द्वारा नियंत्रित किया जाएगा जो हमारे चर का मान रखता है $ एनिमेट स्पीड, जो 1000ms (एक सेकंड) है। फिर हम एनीमेशन को कुछ सहजता देकर समाप्त कर देंगे, जो कि अंदर और बाहर एक आसानी है जो हमें एक आसान एनीमेशन देने में मदद करेगा।

.screen.left, .screen.right, .screen.right:before, .screen.left:before {transition: $animateSpeed ​​all Easy-in-out; }

अब हम जो करना चाहते हैं वह यह है कि जब आप बाईं स्क्रीन पर होवर करते हैं, तो उस अनुभाग में जावास्क्रिप्ट का उपयोग करके एक वर्ग जोड़ा जाएगा (जिसे हम बाद के चरण में लिखेंगे)। जब इस वर्ग को जोड़ा जाता है, तो वह स्क्रीन हमारे द्वारा निर्दिष्ट चर की चौड़ाई तक फैल जाएगी - जो कि 75% होगी, और फिर दाईं ओर छोटे चौड़ाई वाले चर (25%) पर सेट किया जाएगा।

.होवर-बाएं। बाएं {चौड़ाई: $ होवर-चौड़ाई; } .होवर-बाएं। दाएं {चौड़ाई: $ छोटी-चौड़ाई; } .होवर-बाएं .दाएं: पहले { z-सूचकांक: २; }

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

.होवर-दाएं। दाएं {चौड़ाई: $ होवर-चौड़ाई; } .होवर-दाएं। बाएं {चौड़ाई: $ छोटी-चौड़ाई; } .होवर-दाएं .बाएं: से पहले { z-सूचकांक: २; }

10. जावास्क्रिप्ट में ले जाएँ

हम सीएसएस कक्षाओं को जोड़ने और हटाने में मदद करने के लिए वेनिला जावास्क्रिप्ट के स्पर्श का उपयोग करेंगे और हम कुछ नई ईएस 6 सुविधाओं का भी उपयोग करेंगे। पहली चीज़ जो हमें करने की ज़रूरत है वह है कुछ स्थिर चर घोषित करना।

क्योंकि हम उपयोग करेंगे डाक्यूमेंट एक से अधिक बार, हम एक स्थिर चर सेट करेंगे, जिसे कहा जाता है दस्तावेज़ और उसके भीतर दस्तावेज़ को स्टोर करें ताकि हम 'दस्तावेज़' शब्द को अच्छा और छोटा रख सकें।

कॉन्स्ट डॉक = दस्तावेज़;

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

कॉन्स्ट राइट = doc.querySelector ("राइट"); कॉन्स्ट लेफ्ट = doc.querySelector(.left"); कॉन्स्ट कंटेनर = doc.querySelector(.container");

का उपयोग करते हुए बाएं निरंतर चर जिसे हमने अंतिम चरण में घोषित किया था, अब हम इसमें एक ईवेंट श्रोता जोड़ सकते हैं। यह आयोजन होगा माउसएंटर ईवेंट और कॉलबैक फ़ंक्शन का उपयोग करने के बजाय, हम एक अन्य ES6 सुविधा का उपयोग करेंगे जिसे कहा जाता है तीर कार्य' ( () => ).

// होवर लेफ्ट पर कंटेनर एलिमेंट में एक क्लास जोड़ता है। AddEventListener ("माउसेंटर", () => {कंटेनर.क्लासलिस्ट.एड ("होवर-लेफ्ट");});

11. एक वर्ग जोड़ें और हटाएं

अंतिम चरण में, हमारे ईवेंट श्रोता ने a जोड़ा माउसएंटर घटना जो मुख्य कंटेनर वर्ग को लक्षित करती है और एक नया वर्ग जोड़ती है जिसे कहा जाता है होवर-बाएं बाएं खंड तत्व के लिए। इस कॉल के साथ, अब हमें इसे हटाने की जरूरत है जब हम इसे बंद करते हैं। हम इसका उपयोग करके करेंगे माउसलीव घटना और ।हटाना() तरीका।

// उस वर्ग को हटा देता है जो होवर लेफ्ट पर जोड़ा गया था।

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

right.addEventListener("mouseenter", () => {container.classList.add("hover-right"); }); right.addEventListener("mouseleave", () => {कंटेनर.classList.remove("hover-right"); });

12. इसे उत्तरदायी बनाएं

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

@मीडिया (अधिकतम-चौड़ाई: 800px) {h1 {फ़ॉन्ट-आकार: 2rem; } .बटन {चौड़ाई: १२रेम; }

हमने सुनिश्चित किया है कि जब हमारे पेज की चौड़ाई 800px तक कम हो जाएगी, तो फ़ॉन्ट और बटन आकार में कम हो जाएंगे। इसलिए, चीजों को खत्म करने के लिए हम ऊंचाई को भी लक्षित करना चाहते हैं और यह सुनिश्चित करना चाहते हैं कि पृष्ठ की ऊंचाई 700px से कम होने पर हमारे बटन पृष्ठ से नीचे चले जाएं।

@मीडिया (अधिकतम-ऊंचाई: 700px) {.बटन {शीर्ष: 70%; } }

अपने पृष्ठों को सहेजना चाहते हैं? उन्हें PDF के रूप में निर्यात करें और उन्हें सुरक्षित क्लाउड स्टोरेज में सहेजें।

वेब डिजाइन घटना लंदन उत्पन्न करें 19-21 सितंबर 2018 को रिटर्न, उद्योग के अग्रणी वक्ताओं के पैक्ड शेड्यूल, कार्यशालाओं के पूरे दिन और मूल्यवान नेटवर्किंग अवसरों की पेशकश - इसे याद न करें। अभी अपना जनरेट टिकट प्राप्त करें.

यह लेख मूल रूप से नेट पत्रिका में प्रकाशित हुआ था अंक 305. अभी ग्राहक बनें.