अ‍ॅनिमेटेड 3 डी मजकूर प्रभाव तयार करा

सामग्री

• 01. HTML दस्तऐवज आरंभ करा
• 02. दृश्यमान HTML सामग्री
• 03. सीएसएस दीक्षा
• 04. अ‍ॅनिमेशन कंटेनर
• 05. अ‍ॅनिमेशन दीक्षा
• 06. दृश्यात एनिमेट करा
• 07. अ‍ॅनिमेशन अंतिम करणे

कॅनडाच्या जाम 3 द्वारे गमावलेला प्रेम हरवलेल्या प्रेमाच्या कायमस्वरूपी भावनांबद्दल ख real्या मनाने एक सुंदर गडद, ​​मोबाईल-सज्ज इंटरएक्टिव्ह कविता आहे. जीएसएपी लायब्ररीमध्ये अ‍ॅनिमेशनची शक्ती देणारी एचटीएमएल 5 वापरुन वेबसाइट लेआउट तयार केले गेले होते, त्यातील सर्वात दृश्यास्पद वैशिष्ट्यांपैकी एक म्हणजे त्याचे एनिमेटेड 3 डी मजकूर जे खरोखरच लव लॉस्टची कविता जीवनात आणते.

• परस्पर 3 डी टायपोग्राफी प्रभाव बनवा

हे नरकासारखे प्रभावी दिसते आणि एक आकर्षक वापरकर्ता अनुभव तयार करण्यासाठी आपल्या स्वतःच्या कार्यामध्ये सामील होणे कठीण नाही; हे कसे केले ते येथे आहे.

आपली स्वतःची आकर्षक साइट बनवू इच्छिता? वेबसाइट बिल्डर टूल वापरुन पहा आणि योग्य वेब होस्टिंग सेवा निवडून गोष्टी सुरळीत चालू ठेवा.

01. HTML दस्तऐवज आरंभ करा

पहिली पायरी म्हणजे HTML दस्तऐवजाची रचना परिभाषित करणे. यात दस्तऐवज आरंभ करणार्‍या एचटीएमएल कंटेनरचा समावेश आहे, ज्यामध्ये डोके आणि शरीराचे विभाग आहेत. मुख्य विभाग मुख्यतः बाह्य सीएसएस फाइल लोड करण्यासाठी वापरला जात असताना, मुख्य भाग चरण 2 मध्ये तयार केलेली दृश्यमान पृष्ठ सामग्री संग्रहित करेल.

! डॉक्ट्यूपी एचटीएमएल> एचटीएमएल> हेड> शीर्षक> 3 डी मजकूर चळवळ / शीर्षक> दुवा rel = "स्टाईलशीट" प्रकार = "मजकूर / सीएसएस" href = "स्टाईल. सीएसएस" /> / डोके> मुख्य भाग> * * * चरण 2 येथे / मुख्य </ html>

02. दृश्यमान HTML सामग्री

दृश्यमान एचटीएमएल सामग्रीत एक लेख कंटेनर आहे ज्यात दृश्यमान मजकूर आहे. लेखाच्या कंटेनरचा महत्वाचा भाग म्हणजे ‘डेटा-अ‍ॅनिमेट’ गुणधर्म, जे सीएसएसद्वारे दृष्य प्रभाव लागू करण्यासाठी संदर्भित केले जाईल. लेख पृष्ठामधील मजकूर हा पृष्ठाचे मुख्य शीर्षक असल्याचे दर्शविण्यासाठी एच 1 टॅगद्वारे बनविले गेले आहे.

लेख डेटा-एनिमेट = "हलवा"> एच 1> हॅलो तेथे! </ h1> / लेख>

03. सीएसएस दीक्षा

‘स्टाईल.कॉस’ नावाची एक नवीन फाईल तयार करा. सूचनांच्या पहिल्या संचाने पृष्ठाच्या HTML कंटेनर आणि मुख्य भागास काळ्या पार्श्वभूमीसाठी सेट केले आहे, तसेच कोणतेही दृश्यमान सीमा अंतर नाही. पृष्ठावरील मुलाच्या मूलभूत घटकांसाठी व्हाइट हा डीफॉल्ट मजकूर रंग म्हणून देखील सेट केला आहे; मजकूर बनविणार्‍या सामग्रीचा डीफॉल्ट काळा रंग टाळणे अदृश्य असल्याचे दिसते.

एचटीएमएल, मुख्य भाग {पार्श्वभूमी: # 000; पॅडिंग: 0; समास: 0; रंग: # एफएफ; }

04. अ‍ॅनिमेशन कंटेनर

‘डेटा-अ‍ॅनिमेट’ विशेषता सह संदर्भित सामग्री कंटेनरमध्ये विशिष्ट शैली लागू केल्या आहेत. त्याचा आकार vw आणि vh मापन युनिटचा वापर करून तसेच किंचित फिरविला जात असल्यास स्क्रीनच्या पूर्ण आकाराशी जुळण्यासाठी सेट केला आहे. ‘मूव्हइन’ नावाचे अ‍ॅनिमेशन लागू केले गेले आहे, जे 20 सेकंदाच्या कालावधीसाठी राहील आणि अनंतकाळ पुनरावृत्ती करेल.

[डेटा-एनिमेट = "हलवा"] {स्थिती: सापेक्ष; रुंदी: 100vw; उंची: 100vh; अस्पष्टता: 1; अ‍ॅनिमेशन: मूव्हइन 20 चे अनंत; मजकूर-संरेखित करा: मध्यभागी; रूपांतर: फिरवा (20deg); }

05. अ‍ॅनिमेशन दीक्षा

मागील चरणात संदर्भित ‘मूव्हइन’ अ‍ॅनिमेशनला @keyframes वापरुन व्याख्या आवश्यक आहे. अ‍ॅनिमेशनच्या 0% पासून प्रारंभ होणारी प्रथम फ्रेम डीफॉल्ट फॉन्ट आकार, मजकूर स्थिती आणि दृश्यमान छाया सेट करते. याव्यतिरिक्त, आयटम शून्य अस्पष्टतेसह सेट केला गेला आहे जेणेकरून तो सुरूवातीस अदृश्य असेल - म्हणजे. दृश्य बाहेर प्रदर्शित

@keyframes moveIn {0% {फॉन्ट-आकार: 1 म; डावा: 0; अस्पष्टता: 0; मजकूर-सावली: काहीही नाही; ST * * * चरण 6 येथे}

06. दृश्यात एनिमेट करा

पुढील फ्रेम एनीमेशनद्वारे 10% वर ठेवली आहे. ही फ्रेम अस्पष्टता पूर्णपणे दृश्यमान करते जेणेकरून मजकूर हळूहळू दृश्यात अ‍ॅनिमेट होईल.याव्यतिरिक्त, मजकूराला 3 डी खोलीचा भ्रम देण्यासाठी निळ्या आणि कमी होत असलेल्या रंग मूल्यांसह एकाधिक छाया जोडल्या जातात.

10%; अस्पष्टता: 1; मजकूर-सावली: .2 एम -2 एम 4 पीएक्स # एएए, .4 एम -4 एम 4 पीएक्स # 777, .6 एम -6 एम 4 पीएक्स # 444, .8 एम -8 एम 4 पीएक्स # 111; ST * * * चरण 7 येथे

07. अ‍ॅनिमेशन अंतिम करणे

अंतिम फ्रेम 80% आणि अ‍ॅनिमेशनच्या अगदी शेवटी आढळतात. हे फॉन्ट आकार वाढविण्यास आणि घटक डावीकडे हलविण्यास जबाबदार आहेत. मजकूर सावलीसाठी अ‍ॅनिमेट करण्यासाठी नवीन सेटिंग्ज देखील लागू केल्या आहेत, तर फ्रेमच्या 80% ते 100% पर्यंत मजकूर दृश्यमान नसताना देखील.

80% {फॉन्ट-आकार: 8 एएम; डावा: -8 मी; अस्पष्टता: 1; } 100% {फॉन्ट आकार: 10 मी; डावा: -10 मि; अस्पष्टता: 0; मजकूर-सावली: .0 एएम -0.0 एम 4 पीएक्स # एएए, .04 एएम -0.0 एमएम 4 पीएक्स # 777, .06 एम -06 एम 4 पीएक्स # 444, .08 एम -.08 एम 4 पीएक्स # 111; } * * *

टीपः आपण जे प्रकल्प सुरू करीत आहात त्याचा सामना करू शकणारे क्लाउड स्टोरेज असणे आवश्यक आहे (आमचे मार्गदर्शक मदत करेल)

हा लेख मूळतः क्रिएटिव्ह वेब डिझाइन मॅगझिन वेब डिझायनरच्या अंक 273 मध्ये प्रकाशित झाला होता. येथे अंक 273 खरेदी करा किंवा येथे वेब डिझायनरची सदस्यता घ्या.