सीएसएस सह स्मार्ट मजकूर प्रभाव कसे कोडित करावे

सामग्री

• 01. रोलओव्हर मजकूर प्रभाव
• 02. सीएसएस तयार करा
• 03. शब्द ठेवा
• 04. आणि अधिक
• 05. खाली फिरणे
• 06. लोकांसाठी स्वयंचलित
• 07. वैकल्पिक वर्ग जोडा

रोलओव्हर दुवे वापरकर्त्याचे लक्ष वेधून घेण्याचा एक चांगला मार्ग आहे, विशेषत: जर ते काहीतरी असामान्य किंवा मूळ करत असतील. मध्यम मुलाचा फारसा प्रभाव पडतो, क्वचितच इतरत्र पाहिलेला असतो, जो प्रत्येक अक्षरे घेते आणि त्यास अ‍ॅनिमेशनसह वेगळे करते, जे अभ्यागत शब्दावर फिरते तेव्हा लाथ मारते. अ‍ॅनिमेशन सँडविच ब्रँडचे चंचल वर्ण व्यक्त करण्यात मदत करते.

या लेखात, आम्ही आपल्या साइटवर प्रभाव पुन्हा कसा तयार करावा ते दर्शवितो. अधिक प्रेरणा घेण्यासाठी, सर्वोत्कृष्ट सीएसएस अ‍ॅनिमेशन उदाहरणे (त्यांचे कोड कसे बनवायचे या सूचनांसह) आमच्या मार्गदर्शकाकडे पहा. थोड्या वेगळ्या कशासाठी, एक शीर्ष वेबसाइट बिल्डर किंवा सर्वोत्तम क्लाऊड स्टोरेजची निवड करण्याचा प्रयत्न करा. आणि आपण आपली साइट अधिक गुंतागुंतीची करत असल्यास, आपले वेब होस्टिंग योग्य आहे हे सुनिश्चित करा.

01. रोलओव्हर मजकूर प्रभाव

मिडल चाइल्ड वेबसाइटवरील एक उत्कृष्ट मजकूर प्रभाव मेनूवरील रोलओव्हर प्रभावांसाठी आहे, जेथे मजकूरावर अक्षरे विभक्त होतात आणि किंचित फिरतात. हे काही सोप्या एचटीएमएल टॅगसह प्रारंभ करा.

div> div> न्याहारी </ div> </ div>

02. सीएसएस तयार करा

खालील सीएसएस नियम जोडण्यासाठी स्वतंत्र सीएसएस फाईल किंवा स्टाईल टॅग वापरा आणि मुख्यपृष्ठ आणि रॅपर पूर्ण उंची उपलब्ध करुन हे सुनिश्चित करुन पृष्ठ ब्राउझरचा पूर्ण आकार भरा.

बॉडी {रुंदी: 100%; उंची: 100%; समास: 0; पॅडिंग: 0; w .रायपर {प्रदर्शन: ग्रीड; उंची: 100%; }

03. शब्द ठेवा

द शब्द वर्ग ग्रीडमध्ये शब्द ठेवतो. दिलेला कोणताही मजकूर शब्द वर्ग हे लागू करू शकतो. द वर प्रत्येक इतर पत्राला वर्ग लागू केला जाईल आणि ते वरच्या बाजूस जाईल.

.वर्ड {फॉन्ट आकार: 3 म; मार्जिन: ऑटो ऑटो; word .शब्द. अप {प्रदर्शन: इनलाइन-ब्लॉक; ट्रान्सफॉर्मः ट्रान्सलेट 3 डी (0 पीएक्स, 0 पीएक्स, 0 पीएक्स) फिरवा (0 डीजी); संक्रमण: सर्व 0.5 एस-इन-आउट; }

04. आणि अधिक

आता खाली वर्ग खूप समान सेटिंग्ज सामायिक करते वर परंतु होव्हर त्या साठी चळवळ वरच्या बाजूस दर्शविते वर रोलओव्हर. लुक वाढविण्यासाठी वरच्या दिशेने किंचित फिरवले जाते.

.वर्ड .डाऊन {प्रदर्शन: इनलाइन-ब्लॉक; ट्रान्सफॉर्मः ट्रान्सलेट 3 डी (0 पीएक्स, 0 पीएक्स, 0 पीएक्स) फिरवा (0 डीजी); संक्रमण: सर्व 0.5 एस-इन-आउट; word. शब्द: होव्हर .अप {ट्रान्सफॉर्मः ट्रान्सलेट 3 डी (0 पीएक्स, -8 पीएक्स, 0 पीएक्स) फिरवा (12 डीजी); रंग: # 058b05}

05. खाली फिरणे

जेव्हा वापरकर्ता मजकूरावर फिरतो तेव्हा डाउन क्लास मजकूर खाली सरकतो. नंतर जावास्क्रिप्टमध्ये मजकूर विभक्त स्पॅनमध्ये स्वयंचलितपणे जोडल्या जाणार्‍या वर्गात विभक्त केला जाईल.

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

06. लोकांसाठी स्वयंचलित

प्रत्येक अक्षराला वेगवेगळ्या वर्गाच्या स्पॅनमध्ये ठेवणे खूपच त्रासदायक आहे, म्हणून आम्ही निवडकर्त्याची चौकशी करण्यासाठी जावास्क्रिप्ट मिळवून प्रक्रिया प्रत्येक स्वयंचलितपणे स्वयंचलित करू. येथे str टेक्स्ट मधे लूप चालू असताना व्हेरिएबल चालू लेटर पकडते.

स्क्रिप्ट> व्हेर एलिमेंट्स = डॉक्युमेंट.क्यूरीसिलेक्टरऑल (’. वर्ड’); साठी (var i = 0, l = તત્વો. सामर्थ्य; i l; i ++) str var str = घटक [i] .टेक्स्टकन्ट; घटक [i] .innerHTML = ’’;

07. वैकल्पिक वर्ग जोडा

आता आणखी एक पळवाट प्रत्येक अक्षराला त्याच्या स्पॅन एलिमेंटमध्ये ठेवते आणि एकतर जोडते वर किंवा खाली spans करण्यासाठी वर्ग. आपण ब्राउझरमध्ये हे पाहिले तर आपल्याला थोडेसे फिरवत प्रत्येक अक्षरासह खाली आणि खाली पाठविलेले मजकूर दिसेल.

आपण मध्य बाल वेबसाइटवर कृतीमधील परिणाम पाहू शकता.

(var j = 0, ll = str.leight; j ll; j ++) {var spn = document.createElement (’span’); घटक [i] .appendChild (spn); spn.textContent = str [j]; चला पोझ = (j% 2)? 'वर खाली'; spn.classList.add (pos); } script / स्क्रिप्ट>

हा लेख मूलतः सर्जनशील वेब डिझाईन मासिकात प्रकाशित झाला होता वेब डिझायनर.अंक 286 खरेदी करा किंवा सदस्यता घ्या.