CSS के साथ स्मार्ट टेक्स्ट इफेक्ट्स को कैसे कोड करें

विषय

• 01. रोलओवर पाठ प्रभाव
• 02. सीएसएस बनाएं
• 03. शब्द को स्थान दें
• 04. ऊपर और ऊपर
• 05. नीचे मँडराते हुए
• 06. लोगों के लिए स्वचालित
• 07. वैकल्पिक कक्षाएं जोड़ें

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

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

01. रोलओवर पाठ प्रभाव

मिडिल चाइल्ड वेबसाइट पर महान टेक्स्ट प्रभावों में से एक मेनू पर रोलओवर प्रभाव के लिए है, जहां अक्षर टेक्स्ट पर अलग हो जाते हैं और थोड़ा घूमते हैं। इसे कुछ साधारण HTML टैग्स से शुरू करें।

div > div >नाश्ता/div> /div>

02. सीएसएस बनाएं

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

शरीर {चौड़ाई: १००%; ऊंचाई: 100%; मार्जिन: 0; पैडिंग: 0; } .आवरण {प्रदर्शन: ग्रिड; ऊंचाई: 100%; }

03. शब्द को स्थान दें

शब्द कक्षा शब्द को ग्रिड में केन्द्रित करती है। कोई भी पाठ जो दिया गया है शब्द वर्ग इसे लागू कर सकता है। यूपी वर्ग हर दूसरे अक्षर पर लागू होने जा रहा है और ये ऊपर की ओर बढ़ेंगे।

शब्द {फ़ॉन्ट-आकार: 3em; मार्जिन: ऑटो ऑटो; } .word .up {डिस्प्ले: इनलाइन-ब्लॉक; ट्रांसफॉर्म: ट्रांसलेशन 3 डी (0 पीएक्स, 0 पीएक्स, 0 पीएक्स) रोटेट (0 डीईजी); संक्रमण: सभी 0.5s आसानी से बाहर; }

04. ऊपर और ऊपर

अब नीचे वर्ग बहुत समान सेटिंग्स साझा करता है यूपी लेकिन होवर ऊपर की ओर गति को दर्शाता है यूपी रोल ओवर। लुक को बढ़ाने के लिए ऊपर की ओर थोड़ा घुमाया भी जाता है।

.word .down {प्रदर्शन: इनलाइन-ब्लॉक; ट्रांसफॉर्म: ट्रांसलेशन 3 डी (0 पीएक्स, 0 पीएक्स, 0 पीएक्स) रोटेट (0 डीईजी); संक्रमण: सभी 0.5s आसानी से बाहर; } .word:hover .up {रूपांतरण: translation3d(0px, -8px, 0px) घुमाएं(12deg); रंग: #058b05 }

05. नीचे मँडराते हुए

जब उपयोगकर्ता टेक्स्ट पर होवर करता है, तो डाउन क्लास टेक्स्ट को नीचे की ओर ले जाता है। बाद में जावास्क्रिप्ट में पाठ को अलग-अलग स्पैन में विभाजित किया जाएगा, जिसमें कक्षाएं स्वचालित रूप से वैकल्पिक स्पैन में जोड़ी जाएंगी।

.वर्ड: होवर। डाउन {ट्रांसफॉर्म: ट्रांसलेशन 3 डी (0 पीएक्स, 8 पीएक्स, 0 पीएक्स) रोटेट (-12 डिग्री); रंग: #058b05; }

06. लोगों के लिए स्वचालित

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

स्क्रिप्ट> वर तत्व = document.querySelectorAll ('.word'); के लिए (var i = 0, l = element.length; i l; i++) { var str = element[i].textContent; तत्व [i]। आंतरिक HTML = '';

07. वैकल्पिक कक्षाएं जोड़ें

अब एक और लूप प्रत्येक अक्षर को अपने स्पैन तत्व में रखता है और या तो जोड़ता है यूपी या नीचे स्पैन के लिए कक्षा। यदि आप इसे ब्राउज़र में देखते हैं, तो आप देखेंगे कि पाठ प्रत्येक अक्षर से ऊपर और नीचे विभाजित होता है, जबकि थोड़ा घूमता है।

आप मध्य बाल वेबसाइट पर कार्रवाई में प्रभाव देख सकते हैं।

के लिए (var j = 0, ll = str.length; j ll; j++) { var spn = document.createElement('span'); तत्व [i]। संलग्न करें चाइल्ड (एसपीएन); spn.textContent = str [j]; चलो स्थिति = (जे% 2)? 'ऊपर नीचे'; spn.classList.add (स्थिति); } } /स्क्रिप्ट>

यह लेख मूल रूप से क्रिएटिव वेब डिज़ाइन पत्रिका में प्रकाशित हुआ था वेब डिजाइनर.इश्यू खरीदें 286 या सदस्यता लेने के.