Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Parallax Scrolling
Webdesign

सीएसएस के साथ एक मास्केड बैकग्राउंड इफ़ेक्ट बनाएँ

by
Difficulty:BeginnerLength:LongLanguages:

Hindi (हिंदी) translation by Taruni Rampal (you can also view the original English article)

Final product image
What You'll Be Creating

आज हम एक बहुत ही शांत तकनीक के माध्यम से आगे बढ़ने जा रहे हैं, जिसका उपयोग आप एक इफ़ेक्ट बनाने के लिए कर सकते हैं जो थोड़ी सी परलेक्स स्क्रॉलिंग है, फिर भी किसी JavaScript की आवश्यकता नहीं है; यह शुद्ध CSS के माध्यम से बहुत आसानी से प्राप्त किया जा सकता है।

यह जानने के लिए कि क्या आप सीखने जा रहे हैं (आपको इफ़ेक्ट देखने के लिए डेस्कटॉप / लैपटॉप पर देखने की आवश्यकता होगी) देखने के लिए the live demo को चेक करके प्रारंभ करें।

इस तकनीक का उपयोग महान उत्पाद विवरण टेक्स्ट बनाने के लिए किया जा सकता है, या यहां तक कि एक Powerpoint/Keynote प्रस्तुति के समान हो सकता है, और यह ऑनलाइन कहानी इमेजण के लिए एक महान संभावित फिट होगा।

यहां बताया गया है कि आप इसे कैसे करते हैं।

यह CSS में सब है

इस तकनीक की key CSS background-attachment: fixed; CSS 2.1 से हमारे लिए उपलब्ध है। इस स्टाइल के साथ किसी भी बैकग्राउंड इमेज को लागू किया जाता है वह खिड़की से संबंधित एक निश्चित स्थिति में रहेगा (यह जिस तत्व को लागू नहीं किया गया है)। हम इसे अपने चित्रों को जगह में बनाए रखने के लिए उपयोग करेंगे, जबकि हमारी कंटेंट स्क्रॉल स्वतंत्र रूप से इसके साथ-साथ।

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

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

यह कैसे किया है

डेमो में आप जो भी देखते हैं उसे प्राप्त करने के लिए बुनियादी कदम हैं:

  1. एक कंटेनर तत्व बनाएं और अपनी कंटेंट को इसमें जोड़ें।
  2. कंटेनर (हमारे मामले में एक div) को 50% चौड़ाई के एक तरफ पैडिंग के लिए सेट करें, इसलिए कंटेंट को दूसरी तरफ धकेलना।
  3. एक बैकग्राउंड की इमेज जोड़ें, जो लगभग 50% की चौड़ाई पर भी है, और इसे कंटेंट के विपरीत पक्ष पर रखें।
  4. सेट background-attachment: fixed; और स्क्रॉलिंग जादू को देखो!

आइए देखें कि यह सब कैसे स्टेप ब्य स्टेप होता है। आप इस ट्यूटोरियल के लिए grab the source files को प्राप्त करना चाहते हैं ताकि आपके पास आवश्यक इमेज हो।

1. बेसिक सेटअप

एक प्रोजेक्ट फ़ोल्डर बनाकर प्रारंभ करें और इसे index.html फ़ाइल जोड़कर, साथ ही CSS फ़ोल्डर को style.css नाम की फ़ाइल के साथ जोड़ा गया है। images के नाम पर फ़ोल्डर में डाउनलोड किए गए स्रोत फ़ाइल ज़िप से चार इमेज कॉपी और पेस्ट करें

Index.html को इस HTML को जोड़ें:

हम यहाँ क्या कर रहे हैं, हमारे मूल HTML शैल की स्थापना, हमारे स्टाइलशीट और कुछ Google फोंट में लोड हो रहा है, फिर हमारी पहली डिवेल कंटेंट कंटेनर बना रहा है कि हम इस तकनीक को इस प्रकार लागू करेंगे।

div कंटेनर के तीन क्लासेज हैं:

  1. .content - कुछ गुण सेट करने के लिए उपयोग किया जाता है जो कि सभी कंटेंट कंटेनरों में आम हो।
  2. .right - यह पता चलता है कि इस कंटेनर में सही-संरेखित कंटेंट होनी चाहिए (हम बाद में बाएं संरेखित कंटेनर के साथ काम कर रहे हैं)
  3. .illustration_01 - इस कंटेनर के लिए विशिष्ट बैकग्राउंड इमेज और रंग सेट करने के लिए उपयोग किया जाता है

स्टाइलिंग

अब हम कुछ CSS के लिए तैयार हैं। अपनी style.css फ़ाइल में कुछ सामान्य स्वरूपण कोड जोड़कर प्रारंभ करें:

अब .content क्लास के लिए। इसे अपने स्टाइलशीट के निचले भाग में जोड़ें:

यह क्लास है जहां ज्यादातर जादू होता है। टेक्स्ट के लिए, हम अपने फ़ॉन्ट आकार और रंग सेट करते हैं। बैकग्राउंड के लिए आप देखेंगे कि हम background-size को 49% ऑटो सेट करके शुरू करते हैं।

इसका मतलब यह है कि बैकग्राउंड की इमेज हमेशा टेक्स्ट चौड़ाई के 49% को भरने के लिए खिंचाव या सिकुड़ाएगी, और ऊंचाई अनुपात के अनुसार समायोजित हो जाएगी। हम 50% के बजाय 49% के मान का उपयोग कर रहे हैं क्योंकि अन्यथा Firefox स्क्रीन के मध्य में एक अजीब रेखा कलाकृति दिखाता है।

इसके बाद हम background-fixed सेट करते हैं, जैसा कि आप ऊपर बताए गए विवरण से पहले ही जानते हैं, जब हम स्क्रॉल करते हैं तो बैकग्राउंड इमेज बनाते हैं, और इसके पोजीशनिंग को इसके बजाय कंटेनर के बजाय विंडो के सापेक्ष बना देता है।

अंत में हम background-repeat: no-repeat; सेट करते हैं यह सुनिश्चित करने के लिए कि हमारी इमेज पृष्ठ पर एक बार प्रकट होती है।

अगला अपने स्टाइलशीट में .right क्लास जोड़ें।

यह अंतिम श्रेणी स्क्रीन पर एक आधे स्क्रीन और दूसरे पर बैकग्राउंड की इमेज को टेक्स्ट कंटेंट रखता है।

background-position की सेटिंग बैकग्राउंड की इमेज को विंडो के बाईं ओर से शून्य पिक्सल को स्थान देने और विंडो के शीर्ष से आंशिक रूप से नीचे संरेखित करने के लिए कहती है।

अंत में, जोड़ें .illustration_01 क्लास जोड़ें:

यह विशिष्ट बैकग्राउंड इमेज और रंग सेट करता है जो हम इस कंटेंट कंटेनर के लिए चाहते हैं।

अपनी साइट देखें और अब आपको यह देखना चाहिए:

जब आप नीचे स्क्रॉल करते हैं, तो आपको कंटेंट स्लाइड दिखाई देगी, जबकि इमेज बिल्कुल वैसा ही रहती है जहां यह है।

2. एक दूसरा कंटेनर जोड़ें

आइए एक और कंटेनर जोड़ते हैं, यह एक है जो बाईं तरफ कंटेंट के साथ है।

अपने अंतिम div के नीचे इस कंटेंट कंटेनर HTML को जोड़ें:

ध्यान दें कि इस बार हम क्लास का इस्तेमाल करते हैं। .left के बजाय .right और हमने उदाहरण संख्या को बढ़ा दिया है ताकि क्लास .illustration_01 को बदल दिया गया है .illustration_02 से।

अपने स्टाइलशीट में निम्नलिखित दो नई क्लासेज जोड़ें:

इस बार हमारे पास कंटेनर के दाईं ओर 50% पैडिंग लागू होते हैं, इसलिए कंटेंट को बाईं ओर धकेल दिया जाएगा, और बैकग्राउंड हॉरिज़ॉन्टली रूप से 100% पर स्थित है, अर्थात दाईं तरफ। हम इस कंटेनर की बैकग्राउंड में एक अलग रंग और इमेज भी जोड़ते हैं।

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

3. एक विभाजक डालें

यह इस तकनीक के इफ़ेक्ट को बढ़ाता है अगर दो कंटेनरों के बीच एक विभाजक है तो चलिए अब इसे जोड़ते हैं।

अपने दो कंटेनर div के बीच में यह HTML जोड़ें:

और अपने स्टाइलशीट में .separator क्लास जोड़ें:

जब आप अपनी साइट को रिफ्रेश करते हैं तो आपको अब अपने कंटेनरों के बीच एक अच्छा विभाजक मिलना चाहिए:

4. तीसरा और चौथा कंटेनर

अब आप अपने शेष विभाजक और कंटेंट कंटेनरों के लिए कोड दर्ज कर सकते हैं।

अपने मौजूदा डिवाइज़ के नीचे इस HTML को जोड़ें:

और यह स्टाइलशीट में यह CSS:

अब आप अपने पूरे प्रदर्शन को तीसरे और चौथे कंटेंट कंटेनर के साथ दिखाएंगे:

साथ ही एक अंतिम विभाजक को इसे बंद करने के लिए:

5. इसे रेस्पॉन्सिव बनाओ

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

आपके प्रत्येक कंटेंट कंटेनर के शीर्ष पर, शुरुआती divs के अंदर और टेक्स्ट के ऊपर, क्लास .smallscreen के साथ एक आकृति जोड़ें उस स्थान के अंदर और उसमें img टैग को बैकग्राउंड में इस्तेमाल होने वाली प्रत्येक इमेज को लोड करने के लिए जोड़ें:

पहला कंटेंट कंटेनर:

दूसरा कंटेंट कंटेनर:

तीसरा कंटेंट कंटेनर:

चौथा कंटेंट कंटेनर:

हम डिफ़ॉल्ट रूप से इस इनलाइन इमेज को छिपाने के लिए .smallscreen क्लास का उपयोग करने जा रहे हैं, लेकिन जब हम छोटे स्क्रीन आकार पर पहुंचते हैं तो इसे दिखाते हैं।

अपनी स्टाइलशीट में निम्न क्लास जोड़ें:

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

अपनी स्टाइलशीट में ये मीडिया क्वेरी जोड़ें:

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

max-width: 50rem की पांचवें मीडिया क्वेरी में हम कोड शामिल करते हैं जो .smallscreem class को दिखाई देता है, कंटेंट कंटेनर से हमारे 50% साइड पैडिंग को निकालता है, और बैकग्राउंड इमेज छुपाता है। जब यह मीडिया क्वेरी किक्स करती है तो हम अब बड़ी निश्चित बैकग्राउंड इमेज नहीं देख पाएंगे और इसके बजाय हम प्रत्येक कंटेंट कंटेनर के शीर्ष पर नियमित इमेजेज देखेंगे।

अब जब आप अपनी साइट को रीफ्रेश करते हैं तो आपको ये सभी व्यूपोर्ट की चौड़ाई के साथ आसानी से नीचे दिखनी चाहिए, जब तक आप इसका छोटा आकार नहीं देखते हैं।

निष्कर्ष

इतने सालों से CSS के साथ काम करने के बाद भी मैं कभी भी बढ़ती संख्या की आश्चर्यजनक चीजों से आश्चर्यचकित नहीं होऊँगी जो आप इसके साथ कर सकते हैं। और सरल तकनीक, अधिक इफ़ेक्टशाली है। इस छोटे मणि की कोशिश करो,

यह इतनी जल्दी और आसानी से आपको आदी हो जाने की संभावना है!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.