प्यार खोना
कनाडा द्वारा
जाम 3
खोए हुए प्यार के आसपास स्थायी भावनाओं के बारे में वास्तविक दिल के साथ एक सुंदर अंधेरा, मोबाइल-तैयार इंटरैक्टिव कविता है।
वेबसाइट लेआउट
के साथ एचटीएमएल 5 का उपयोग करके बनाया गया था
जीएसएपी
लाइब्रेरी अपनी एनीमेशन को पावर कर रही है, इसकी सबसे दृश्यमान हड़ताली सुविधाओं में से एक यह एनिमेटेड 3 डी टेक्स्ट है जो वास्तव में प्यार खोने की कविता को जीवन में लाता है।
इंटरएक्टिव 3 डी टाइपोग्राफी प्रभाव बनाएं
यह नरक के रूप में प्रभावशाली लग रहा है, और एक आकर्षक बनाने के लिए अपने काम में शामिल होना मुश्किल नहीं है
प्रयोगकर्ता का अनुभव
; यहां बताया गया है कि यह कैसे किया जाता है।
अपनी खुद की आकर्षक साइट बनाना चाहते हैं? आज़माएं
वेबसाइट निर्माता
उपकरण, और सही उठाकर चीजों को आसानी से चलते रहें
वेब होस्टिंग
सर्विस।
लव लॉस्ट का 3 डी टेक्स्ट दर्शक पर स्क्रीन से बाहर आता है
[4 9]
01. HTML दस्तावेज़ शुरू करें
पहला कदम HTML दस्तावेज़ की संरचना को परिभाषित करना है। इसमें एचटीएमएल कंटेनर शामिल है जो दस्तावेज़ को शुरू करता है, जिसमें सिर और शरीर अनुभाग होते हैं। जबकि हेड सेक्शन का मुख्य रूप से बाहरी सीएसएस फ़ाइल को लोड करने के लिए उपयोग किया जाता है, लेकिन बॉडी सेक्शन चरण 2 में बनाई गई दृश्य पृष्ठ सामग्री को स्टोर करेगा।
& lt;! डॉक्टाइप एचटीएमएल और जीटी;
& lt; html & gt;
& lt; हेड और जीटी;
& lt; शीर्षक & gt; 3 डी पाठ आंदोलन & lt; / शीर्षक & gt;
& lt; लिंक rel = "stylesheet" प्रकार = "टेक्स्ट / सीएसएस" Href = "styles.css" / & gt;
& lt; / सिर & gt;
& lt; शरीर & gt;
*** चरण 2 यहाँ
& lt; / शरीर & gt;
& lt; / html & gt; [5 9]
02. दृश्यमान HTML सामग्री
दृश्यमान HTML सामग्री में एक लेख कंटेनर होता है जिसमें दृश्यमान पाठ होता है। लेख कंटेनर का महत्वपूर्ण हिस्सा 'डेटा-एनिमेट' विशेषता है, जिसे दृश्य प्रभाव लागू करने के लिए सीएसएस द्वारा संदर्भित किया जाएगा। लेख के अंदर का पाठ एच 1 टैग से किया जाता है यह इंगित करने के लिए कि सामग्री पृष्ठ का मुख्य शीर्षक है।
'Styles.css' नामक एक नई फ़ाइल बनाएं। निर्देशों का पहला सेट पृष्ठ के एचटीएमएल कंटेनर और बॉडी को एक काला पृष्ठभूमि के साथ-साथ कोई दृश्य सीमा अंतर नहीं रखता है। व्हाइट को विरासत में पृष्ठ पर सभी बाल तत्वों के लिए डिफ़ॉल्ट टेक्स्ट रंग के रूप में भी सेट किया जाता है; टेक्स्ट बनाने की सामग्री के डिफ़ॉल्ट काले रंग से बचने के लिए अदृश्य प्रतीत होता है।
'डेटा-एनिमेट' विशेषता के साथ संदर्भित सामग्री कंटेनर में विशिष्ट शैलियों को लागू किया जाता है। इसका आकार वीडब्ल्यू और वीएच माप इकाइयों का उपयोग करके स्क्रीन के पूर्ण आकार से मेल खाने के लिए सेट है, साथ ही थोड़ा घुमाया जा रहा है। 'मूविन' नामक एक एनीमेशन लागू किया जाता है, जो 20 सेकंड की अवधि के लिए चलेगा और असीम रूप से दोहराएगा।
पिछले चरण में संदर्भित 'मूविन' एनीमेशन को @keyframes का उपयोग करके एक परिभाषा की आवश्यकता है। एनीमेशन के 0% से शुरू होने वाला पहला फ्रेम डिफ़ॉल्ट फ़ॉन्ट आकार, टेक्स्ट पोजिशनिंग और दृश्यमान छाया सेट करता है। इसके अतिरिक्त, आइटम शून्य अस्पष्टता के साथ सेट किया गया है ताकि यह प्रारंभ में अदृश्य हो - यानी। दृश्य से बाहर प्रदर्शित किया गया।
कई छायाओं का उपयोग करके आप 3 डी प्रभाव को बढ़ा सकते हैं
[4 9]
अगला फ्रेम एनीमेशन के माध्यम से 10% पर रखा गया है। यह फ्रेम अस्पष्टता को पूरी तरह से दिखाई देने के लिए सेट करता है, जिसके परिणामस्वरूप पाठ धीरे-धीरे देखने में एनिमेटेड होता है। इसके अतिरिक्त, पाठ को 3 डी गहराई के भ्रम देने के लिए कई छायाएं नीली और घटते रंग मूल्यों के साथ जोड़े जाते हैं।
अंतिम फ्रेम 80% और एनीमेशन के अंत में होते हैं। ये फ़ॉन्ट आकार बढ़ाने और तत्व को बाईं ओर ले जाने के लिए ज़िम्मेदार हैं। नई सेटिंग्स को टेक्स्ट छाया के लिए एनिमेट करने के लिए भी लागू किया जाता है, जबकि फ्रेम 80% से 100% तक पाठ को ध्यान में रखते हुए।
