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

अपनी परियोजनाओं में कंकाल स्क्रीन को लागू करके अपने इंटरफेस को अधिक सहज और अभिव्यंजक बनाने के लिए तैयार हैं? यहां बताया गया है कि शुरुआत कैसे करें।

वेब पेज लेआउट डिजाइन करें

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

एक बार जब आप लेआउट के डिजाइन का मसौदा तैयार कर लेते हैं, या तो कागज या फिगमा या एडोब एक्सडी जैसे ऐप का उपयोग करते हुए, यह HTML संरचना तैयार करने का समय है।

बुनियादी ढांचे का निर्माण

एक नई फ़ाइल बनाएँ index.html और माता-पिता के अंदर लेआउट के लिए कुछ HTML लिखें साथ वर्ग = "प्रोफ़ाइल-कंटेनर". जोड़ें वर्ग = "कंकाल" कंकाल स्क्रीन लोडिंग प्रभाव को लागू करने के लिए प्रत्येक तत्व के लिए। जावास्क्रिप्ट का उपयोग करके सामग्री लोड होने पर आप इस वर्ग को हटा देंगे।

ध्यान दें: सीएसएस और जावास्क्रिप्ट फाइलों को अपने हेडर में लिंक करना न भूलें index.html फ़ाइल।

जॉन डो

सॉफ्टवेयर इंजीनियर @ गूगल || फुल स्टैक डेवलपर || स्वयं सिखाया

बेंगलुरु, कर्नाटक, भारत • संपर्क जानकारी


534 कनेक्शन






संदेश
अधिक

अपने पेज को स्टाइल करना शुरू करें

बुनियादी सीएसएस विशेषताओं को लागू करें जैसे हाशिया, फ़ॉन्ट परिवार, तथा रंग पूरे शरीर पर।

तन {
 मार्जिन: 0;
 फ़ॉन्ट-परिवार: एरियल;
 रंग: आरजीबीए (255, 255, 255, 0.9);
}

लोडिंग प्रभाव जोड़ें

लोडिंग प्रभाव जोड़ने के लिए, एक जोड़ें ::बाद मेंछद्म तत्व कंकाल वर्ग के लिए जो एक या दो सेकंड में बाएं (-100%) से दाएं (100%) की ओर बढ़ता है, जिसके परिणामस्वरूप एक झिलमिलाता एनीमेशन होता है।

।कंकाल {
 स्थिति: रिश्तेदार;
 चौड़ाई: अधिकतम-सामग्री;
 ओवर फलो हिडेन;
 सीमा-त्रिज्या: 4px;
 पृष्ठभूमि-रंग: #1e2226 !महत्वपूर्ण;
 रंग: पारदर्शी! महत्वपूर्ण;
 सीमा-रंग: #1e2226 !महत्वपूर्ण;
 उपयोगकर्ता-चयन: कोई नहीं;
 कर्सर: डिफ़ॉल्ट;
}
.कंकाल img {
 अस्पष्टता: 0;
}
.कंकाल:: के बाद {
 स्थिति: निरपेक्ष;
 शीर्ष: 0;
 दाएं: 0;
 नीचे: 0;
 बाएं: 0;
 ट्रांसफॉर्म: ट्रांसलेशनएक्स (-100%);
 पृष्ठभूमि-छवि: रैखिक-ढाल (
 90 डिग्री,
 आरजीबीए (255, 255, 255, 0) 0,
 आरजीबीए (255, 255, 255, 0.2) 20%,
 आरजीबीए (255, 255, 255, 0.5) 60%,
 आरजीबीए (255, 255, 255, 0)
 );
 एनिमेशन: टिमटिमाना 2s अनंत;
 विषय: '';
}
@कीफ़्रेम टिमटिमाना {
 100% {
 ट्रांसफ़ॉर्म: ट्रांसलेशनएक्स (100%);
 }
}

छवियों को स्टाइल करें

अब, प्रोफाइल और कवर इमेज को स्टाइल करते हैं। सेट करना न भूलें ओवर फलो हिडेन; ताकि किसी भी तरह की विसंगति से बचा जा सके।

आईएमजी {
 चौड़ाई: 100%;
 लंबवत-संरेखण: मध्य;
}
.प्रोफाइल-कंटेनर {
 चौड़ाई: 95%;
 अधिकतम-चौड़ाई: 780px;
 मार्जिन: 0 ऑटो;
 सीमा-त्रिज्या: 8px;
 मार्जिन-टॉप: 32px;
 पृष्ठभूमि-रंग: #1e2226;
 ओवर फलो हिडेन;
 स्थिति: रिश्तेदार;
}
कवर-आईएमजी {
 चौड़ाई: 100%;
 ओवर फलो हिडेन;
 पृष्ठभूमि-रंग: #1e2226;
 पहलू-अनुपात: 4 / 1;
}
प्रोफ़ाइल-आईएमजी {
 सीमा-त्रिज्या: 50%;
 चौड़ाई: 160px;
 ऊंचाई: 160px;
 सीमा: 4px ठोस #000;
 पृष्ठभूमि-रंग: #1e2226;
 मार्जिन: 0 ऑटो;
 स्थिति: रिश्तेदार;
 ओवर फलो हिडेन;
 नीचे: 100 पीएक्स;
}

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

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

@मीडिया (अधिकतम-चौड़ाई: 560px) {
 प्रोफ़ाइल-आईएमजी {
 चौड़ाई: 100 पीएक्स;
 ऊंचाई: 100 पीएक्स;
 नीचे: 60 पीएक्स;
 }
}

टेक्स्ट को स्टाइल करें

a setting सेट करके टेक्स्ट को स्टाइल करें हाशिया, फ़ॉन्ट आकार, तथा फ़ॉन्ट वजन. आप टेक्स्ट का रंग भी बदल सकते हैं, एक शीर्षक, पैराग्राफ या एंकर जोड़ सकते हैं अपनी पसंद के अनुसार टैग करें। एंकर टैग में होवर इफेक्ट जोड़ना उपयोगी है क्योंकि यह उपयोगकर्ता को एक लिंक के बारे में जानने देता है।

प्रोफ़ाइल-पाठ {
 मार्जिन-टॉप: -80px;
 पैडिंग: 0 16px;
}
प्रोफ़ाइल-पाठ h1 {
 मार्जिन-बॉटम: 0;
 फ़ॉन्ट-आकार: 24px;
 ओवर फलो हिडेन;
}
.प्रोफ़ाइल-पाठ्य p {
 मार्जिन: 4px 0;
 ओवर फलो हिडेन;
}
.प्रोफ़ाइल-पाठ्य h5 {
 मार्जिन-टॉप: 4px;
 फ़ॉन्ट-आकार: 14px;
 मार्जिन-बॉटम: 8px;
 फ़ॉन्ट-वजन: 400;
 रंग: #ffffff99;
 ओवर फलो हिडेन;
}
प्रोफ़ाइल-पाठ एक {
 रंग: #70b5f9;
 फ़ॉन्ट-आकार: 14px;
 पाठ-सजावट: कोई नहीं;
 फ़ॉन्ट-वजन: 600;
}
.प्रोफाइल-पाठ a: होवर {
 रंग: #70b5f9;
 पाठ-सजावट: रेखांकित;
}

सीटीए को स्टाइल करें

कॉल टू एक्शन (सीटीए) महत्वपूर्ण है क्योंकि आप आम तौर पर अपने उपयोगकर्ताओं की विज़िट को किसी तरह से परिवर्तित करना चाहेंगे। इसे आसानी से ध्यान देने योग्य रंग देने से आपके सीटीए को पेज पर अलग दिखने में मदद मिलेगी।

.प्रोफाइल-सीटीए {
 पैडिंग: 16px 16px 32px;
 प्रदर्शन: फ्लेक्स;
}
.प्रोफाइल-सीटीए ए {
 पैडिंग: 6px 16px;
 सीमा-त्रिज्या: 24px;
 पाठ-सजावट: कोई नहीं;
 प्रदर्शन क्षेत्र;
}
संदेश-बीटीएन {
 पृष्ठभूमि-रंग: #70b5f9;
 रंग: #000;
}
.मोर-बीटीएन {
 रंग: विरासत;
 सीमा: 1px ठोस आरजीबीए (255, 255, 255, 0.9);
 मार्जिन-बाएं: 8px;
}

उत्पादन:

जावास्क्रिप्ट का उपयोग करके कंकाल लोडिंग प्रभाव को बंद करें

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

ध्यान दें: जोड़ना सुनिश्चित करें के अंत से ठीक पहले अनुभाग।

कास्ट कंकाल = दस्तावेज़। क्वेरी चयनकर्ता सभी ('.कंकाल')
कंकाल। प्रत्येक के लिए ((कंकाल) => {
 सेटटाइमआउट (() => {
कंकाल.classList.remove ('कंकाल')
 }, 4000)
})

उत्पादन:

जावास्क्रिप्ट क्या है और यह कैसे काम करता है?

आपने HTML, CSS और JavaScript का उपयोग करके सफलतापूर्वक एक कंकाल स्क्रीन लोडिंग प्रभाव बनाया है। अब, जब भी कोई सर्वर से नई सामग्री का अनुरोध करता है, तो आप डेटा लोड होने के दौरान कंकाल स्क्रीन लोडिंग प्रभाव प्रदर्शित कर सकते हैं। यह एक लोकप्रिय डिज़ाइन प्रवृत्ति बन रही है, जैसा कि आप इसे Google, Facebook और Slack जैसी साइटों पर देख सकते हैं।

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

जावास्क्रिप्ट क्या है और यह कैसे काम करता है?

यदि आप वेब विकास सीख रहे हैं, तो यहां आपको जावास्क्रिप्ट के बारे में जानने की जरूरत है और यह HTML और CSS के साथ कैसे काम करता है।

आगे पढ़िए

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