विषय
- 01. HTML दस्तावेज़ आरंभ करें
- 02. दर्शनीय HTML सामग्री
- 03. सीएसएस दीक्षा
- 04. एनिमेशन कंटेनर
- 05. एनिमेशन दीक्षा
- 06. देखने में चेतन
- 07. एनीमेशन को अंतिम रूप देना
लव लॉस्ट बाय कनाडाज जैम3 एक सुंदर अंधेरे, मोबाइल के लिए तैयार संवादात्मक कविता है जो खोए हुए प्यार के बारे में स्थायी भावनाओं के बारे में है। वेबसाइट का लेआउट HTML5 का उपयोग करके बनाया गया था, जिसमें GSAP लाइब्रेरी अपने एनीमेशन को शक्ति प्रदान करती है, इसकी सबसे आकर्षक विशेषताओं में से एक इसका एनिमेटेड 3D टेक्स्ट है जो वास्तव में लव लॉस्ट की कविता को जीवंत करता है।
- इंटरैक्टिव 3D टाइपोग्राफी प्रभाव बनाएं
यह नरक के रूप में प्रभावशाली दिखता है, और एक आकर्षक उपयोगकर्ता अनुभव बनाने के लिए अपने स्वयं के काम में शामिल करना मुश्किल नहीं है; यहां बताया गया है कि यह कैसे किया जाता है।
अपनी खुद की आकर्षक साइट बनाना चाहते हैं? एक वेबसाइट बिल्डर टूल आज़माएं, और सही वेब होस्टिंग सेवा चुनकर चीजों को सुचारू रूप से चालू रखें।
01. HTML दस्तावेज़ आरंभ करें
पहला कदम HTML दस्तावेज़ की संरचना को परिभाषित करना है। इसमें HTML कंटेनर शामिल है जो दस्तावेज़ को आरंभ करता है, जिसमें शीर्ष और मुख्य भाग होते हैं। जबकि मुख्य अनुभाग का उपयोग मुख्य रूप से बाहरी CSS फ़ाइल को लोड करने के लिए किया जाता है, बॉडी सेक्शन चरण 2 में बनाई गई दृश्यमान पृष्ठ सामग्री को संग्रहीत करेगा।
!DOCTYPE html> html> सिर> शीर्षक> 3D टेक्स्ट मूवमेंट/शीर्षक> लिंक rel="stylesheet" type="text/css" href="styles.css" /> /head> body> *** STEP 2 यहाँ /शरीर> /html>
02. दर्शनीय HTML सामग्री
दृश्यमान HTML सामग्री में एक लेख कंटेनर होता है जिसमें दृश्यमान पाठ होता है। आलेख कंटेनर का महत्वपूर्ण हिस्सा 'डेटा-एनिमेट' विशेषता है, जिसे दृश्य प्रभावों को लागू करने के लिए सीएसएस द्वारा संदर्भित किया जाएगा। लेख के अंदर का पाठ यह इंगित करने के लिए h1 टैग से बनाया गया है कि सामग्री पृष्ठ का मुख्य शीर्षक है।
आलेख data-animate="move in"> h1>नमस्कार!/h1> /लेख>
03. सीएसएस दीक्षा
'styles.css' नामक एक नई फ़ाइल बनाएँ। निर्देशों के पहले सेट ने पृष्ठ के HTML कंटेनर और बॉडी को एक काली पृष्ठभूमि के साथ-साथ कोई दृश्यमान सीमा रिक्ति के लिए सेट किया है। पृष्ठ पर सभी चाइल्ड तत्वों को इनहेरिट करने के लिए सफेद को डिफ़ॉल्ट टेक्स्ट रंग के रूप में भी सेट किया गया है; टेक्स्ट बनाने वाली सामग्री के डिफ़ॉल्ट काले रंग से बचना अदृश्य प्रतीत होता है।
एचटीएमएल, बॉडी {पृष्ठभूमि: #000; पैडिंग: 0; मार्जिन: 0; रंग: #ff; }
04. एनिमेशन कंटेनर
'डेटा-एनिमेट' विशेषता के साथ संदर्भित सामग्री कंटेनर में विशिष्ट शैलियों को लागू किया गया है। इसका आकार वीडब्ल्यू और वीएच माप इकाइयों का उपयोग करके स्क्रीन के पूर्ण आकार से मेल खाने के लिए सेट है, साथ ही थोड़ा घुमाया जा रहा है। 'मूवइन' नामक एक एनीमेशन लागू किया जाता है, जो 20 सेकंड की अवधि तक चलेगा और असीम रूप से दोहराएगा।
[डेटा-एनिमेट = "आगे बढ़ें"] {स्थिति: रिश्तेदार; चौड़ाई: 100 वीडब्ल्यू; ऊंचाई: 100 वीएच; अस्पष्टता: 1; एनीमेशन: 20s अनंत में ले जाएँ; पाठ-संरेखण: केंद्र; ट्रांसफॉर्म: रोटेट (20 डिग्री); }
05. एनिमेशन दीक्षा
पिछले चरण में संदर्भित 'मूवइन' एनीमेशन के लिए @keyframes का उपयोग करके एक परिभाषा की आवश्यकता होती है। एनीमेशन के 0% से शुरू होने वाला पहला फ्रेम डिफ़ॉल्ट फ़ॉन्ट आकार, टेक्स्ट पोजिशनिंग और दृश्यमान छाया सेट करता है। इसके अतिरिक्त, आइटम शून्य अस्पष्टता के साथ सेट किया गया है ताकि यह प्रारंभ में अदृश्य हो - यानी। दृश्य से बाहर प्रदर्शित।
@keyframes moveIn { 0% {फ़ॉन्ट-आकार: 1em; बाएं: 0; अस्पष्टता: 0; पाठ-छाया: कोई नहीं; } *** चरण 6 यहां }
06. देखने में चेतन
एनीमेशन के माध्यम से अगला फ्रेम 10% पर रखा गया है। यह फ्रेम अपारदर्शिता को पूरी तरह से दृश्यमान पर सेट करता है, जिसके परिणामस्वरूप पाठ धीरे-धीरे दृश्य में एनिमेटेड होता है।इसके अतिरिक्त, पाठ को 3डी गहराई का भ्रम देने के लिए नीले और घटते रंग मानों के साथ कई छायाएं जोड़ी जाती हैं।
10% { अस्पष्टता: 1; टेक्स्ट-शैडो: .2em -.2em 4px #aaa, .4em -.4em 4px #777, .6em -.6em 4px #444, .8em -.8em 4px #111; } *** यहां चरण 7HER
07. एनीमेशन को अंतिम रूप देना
अंतिम फ्रेम 80% पर और एनीमेशन के बहुत अंत में होते हैं। ये फ़ॉन्ट आकार बढ़ाने और तत्व को बाईं ओर ले जाने के लिए जिम्मेदार हैं। टेक्स्ट शैडो की ओर चेतन करने के लिए नई सेटिंग्स भी लागू की जाती हैं, साथ ही टेक्स्ट को फ़्रेम से 80% से 100% तक दृश्य से बाहर कर दिया जाता है।
80% {फ़ॉन्ट-आकार: 8em; बाएं: -8em; अस्पष्टता: 1; } १००% {फ़ॉन्ट-आकार: 10em; बाएं: -10em; अस्पष्टता: 0; टेक्स्ट-शैडो: .02em -.02em 4px #aaa, .04em -.04em 4px #777, .06em -.06em 4px #444, .08em -.08em 4px #111; } ***
नोट: आप जो भी प्रोजेक्ट शुरू कर रहे हैं, उसके पास क्लाउड स्टोरेज होना आवश्यक है (हमारी मार्गदर्शिका मदद करेगी)।
यह लेख मूल रूप से क्रिएटिव वेब डिज़ाइन पत्रिका वेब डिज़ाइनर के अंक 273 में प्रकाशित हुआ था। इश्यू 273 यहां खरीदें या वेब डिज़ाइनर को यहाँ सब्सक्राइब करें.
