विषय
- शुरू करना
- टर्नटेबल का आधार बनाना
- पैर बनाना
- हाथ और सिर
- रंग और बनावट
- प्रतिपादन और निर्यात
- लोगो को खत्म करना
- लोगो को चेतन करें
वेब पर 3डी एनिमेशन बनाने के कई तरीके हैं, उनमें से अधिकांश के लिए जावास्क्रिप्ट और वेबजीएल के अच्छे ज्ञान या फ्लैश जैसे प्लग-इन के उपयोग की आवश्यकता होती है। CSS 3D ट्रांसफ़ॉर्म के लिए धन्यवाद, केवल HTML और CSS का उपयोग करके 3D बनाना संभव है, लेकिन ऐसा करना आसान नहीं है। ट्रिडिव, मेरा मुफ्त ऑनलाइन ऐप, एक सरल और सहज ज्ञान युक्त WYSIWYG इंटरफ़ेस की पेशकश करते हुए प्रक्रिया को सरल बनाता है जो उपयोगकर्ताओं को कोड की एक भी पंक्ति लिखे बिना 3D ऑब्जेक्ट बनाने में सक्षम बनाता है।
इस ट्यूटोरियल में, हम 'Tridiv Records' के लिए एक लोगो बनाने और चेतन करने जा रहे हैं, एक काल्पनिक रिकॉर्ड लेबल, केवल HTML और CSS का उपयोग करके। लोगो के लिए मुख्य दृश्य त्रिदीव का उपयोग करके 3डी में बनाया जाएगा। फिर हम नियमित HTML और CSS का उपयोग करके टाइपोग्राफिक तत्वों को जोड़ेंगे।
आप अंतिम एनीमेशन और इसे उत्पन्न करने वाले कोड को यहां देख सकते हैं।
शुरू करना
हम Tridiv का उपयोग करके 3D में टर्नटेबल बनाकर शुरू करने जा रहे हैं। Tridiv.com पर जाएं और ऐप लॉन्च करें। आपको क्रोम, सफारी, या ओपेरा 15 (या बाद में) का उपयोग करने की आवश्यकता होगी।
शुरू करने से पहले, ट्रिडिव इंटरफ़ेस को समझना महत्वपूर्ण है। संपादक का मुख्य भाग चार दृश्यों से बना है: ऊपर बाईं ओर 3D दृश्य है, जो दृश्य का संपूर्ण दृश्य प्रदान करता है। अन्य तीन दृश्य इसे ऊपर, किनारे और सामने से दिखाते हैं। इन तीन दृश्यों का उपयोग करके, आप 3D आकार बना सकते हैं, संपादित कर सकते हैं और स्थानांतरित कर सकते हैं।
क्षैतिज टूलबार दो भागों में विभाजित है: बायां भाग आपके दस्तावेज़ से संबंधित जानकारी प्रदर्शित करता है; दाहिने हिस्से में आकृतियाँ बनाने और संपादित करने के लिए उपकरण हैं। चाल चयन और संपादित करें चयन बटन विभिन्न संपादन मोड के बीच स्विच करते हैं।
गुण फलक (साइडबार) दस्तावेज़ सेटिंग्स को प्रदर्शित करता है जैसे ज़ूम और स्नैप टू ग्रिड, और चयनित आकार के गुण (आकार, स्थिति, रोटेशन, रंग, और इसी तरह)। आयाम और स्थिति के लिए प्रयुक्त इकाई ईएमएस है; घूर्णन कोण डिग्री में हैं।
ट्यूटोरियल में बाद में किसी भी भ्रम से बचने के लिए, हम निम्नलिखित शॉर्टहैंड का उपयोग करने जा रहे हैं:
डब्ल्यू = चौड़ाई एच = ऊंचाई डी = गहराई व्यास = व्यास एक्स डिग्री = एक्स-अक्ष में रोटेशन वाई डिग्री = वाई-अक्ष में रोटेशन जेड डिग्री = जेड-अक्ष में रोटेशन
टर्नटेबल का आधार बनाना
ज़ूम मान को 200 पर सेट करके प्रारंभ करें। आकृतियों को खींचने में सहायता के लिए, स्नैप टू ग्रिड सेटिंग को सक्रिय करें activate दस्तावेज़ सेटिंग्स साइडबार का खंड। स्नैप मान को पर सेट करें 0.125.
टर्नटेबल का आधार एक साधारण घनाभ से बना है, इसलिए क्लिक करें घनाभ जोड़ें शीर्ष टूलबार में बटन। आपको संपादक के चारों दृश्यों में घनाकार दिखाई देना चाहिए।
आकृति का नाम बदलें आधार गुण फलक के नाम फ़ील्ड का उपयोग करना (अंडर आकार गुण) आकृति का नाम एक मान्य CSS वर्ग का नाम होना चाहिए क्योंकि इसका उपयोग संपादक द्वारा उत्पन्न कोड में किया जाएगा। लोगो को एनिमेट करते समय हम बाद में इन वर्ग नामों का उपयोग करेंगे, इसलिए सुनिश्चित करें कि आप हर उस नई आकृति को नाम दें जिसे आप ठीक से बनाते हैं।
घनाभ का नाम रखने के बाद, सुनिश्चित करें कि यह शीर्ष दृश्य में चुना गया है (इसे नीले रंग में हाइलाइट किया जाना चाहिए, इसके चारों ओर औजारों की एक गोलाकार अंगूठी के साथ), फिर क्लिक करें संपादित करें संपादन हैंडल दिखाने के लिए रिंग के शीर्ष पर स्थित बटन। नियंत्रण हैंडल को घनाभ के किनारों पर तब तक खींचें, जब तक कि चौड़ाई और गहराई तक न पहुंच जाए डब्ल्यू = 10 तथा घ = 8 में आकार गुण.
साइड व्यू के अंदर आकृति पर क्लिक करें। यह इस दृश्य में संपादन हैंडल दिखाएगा, जिससे हम इसकी ऊंचाई बदल सकते हैं। ऊंचाई को तब तक समायोजित करें जब तक वह पहुंच न जाए एच = 2. आप सीधे गुण फलक में मान भी टाइप कर सकते हैं। घनाभ के कोनों को गोल करने के लिए, गुण फलक में कोनों के मानों को बदल दें 1.75, फिर दबाएं [दर्ज] परिवर्तनों को लागू करने की कुंजी। आपके पास कुछ ऐसा होगा।
पैर बनाना
टर्नटेबल के पैरों के लिए, हम सिलेंडर का उपयोग करने जा रहे हैं। एक बेलन जोड़ें, फिर उसका व्यास बदल दें हीरा = 1.75 और इसकी ऊंचाई एच = 0.5. पर क्लिक करें चाल आकार पर खींचने योग्य क्षेत्र दिखाने के लिए शीर्ष टूलबार में चयन बटन। सिलेंडर को आधार के नीचे ले जाएं, इसे किसी एक कोने में रखें। (आपको इसे शीर्ष, पार्श्व और सामने के दृश्यों में स्थानांतरित करने की आवश्यकता हो सकती है।)
सिलेंडर को डुप्लिकेट करें (दबाएं डुप्लिकेट टूल के गोलाकार रिंग में बटन दबाएं, या दबाएं घ कुंजी) और नए सिलेंडर को आधार के दूसरे कोने में ले जाने के लिए। प्रक्रिया को तब तक दोहराएं जब तक कि सभी चार पैर सही स्थिति में न आ जाएं। सिलिंडर का नाम देना न भूलें (उदाहरण के लिए, पैर-बाएं-शीर्ष, पैर-दाएं-शीर्ष, पैर-बाएं-नीचे, पैर-बाएं-ऊपर) जब आपने ऐसा कर लिया, तो परिणाम इस तरह दिखना चाहिए।
अब हम प्लेटर, डिस्क, आर्म एक्सिस और बटन बनाने पर विचार करेंगे। अगला आकार बनाने की प्रक्रिया पैरों के लिए समान है। यहाँ विभिन्न सिलेंडरों के लिए उपयोग किए जाने वाले आयाम हैं:
थाली: हीरा = 7; एच = 0,5 डिस्क: डायम = 6.75; एच = ०.२५ बटन: व्यास = १.५; ज = ०.२५ भुजा-अक्ष-आधार: व्यास = २.२५; h = ०.२५ भुजा-अक्ष: व्यास = १.३७५; एच = 1
सिलिंडर के किनारों को परिष्कृत करने के लिए, आप गुण फलक में पार्श्व फ़ील्ड का उपयोग करके, प्रत्येक में चेहरों की संख्या बढ़ा सकते हैं। बहुत अधिक पक्ष न जोड़ें क्योंकि यह संपादक के वैश्विक प्रदर्शन और अंतिम एनीमेशन को नकारात्मक रूप से प्रभावित कर सकता है। इस मामले में, मैं आपको सलाह दूंगा कि थाली और डिस्क के लिए 32 से अधिक पक्षों का उपयोग न करें। आपके पास कुछ ऐसा होना चाहिए।
हाथ और सिर
टर्नटेबल की भुजा और सिर के लिए, हम घनाभों का उपयोग करने जा रहे हैं। बांह के लिए, एक घनाभ बनाएं (डब्ल्यू = 0.25; एच = 0.25; घ = 4), फिर का रोटेशन लागू करें -33° पर शाफ़्ट. सिर के लिए, एक घनाभ बनाएं (डब्ल्यू = 0.5; एच = 0.5; घ = 1), फिर का रोटेशन लागू करें -33° पर शाफ़्ट. आर्म-अक्ष सिलेंडर के साथ दोनों आकृतियों को संरेखित करें। परिणाम इस तरह दिखना चाहिए।
रंग और बनावट
हम लगभग टर्नटेबल के साथ कर रहे हैं। अंतिम चरण रंगों को असाइन करना और विनाइल (रिकॉर्ड की सतह का प्रतिनिधित्व करने वाली छवि) पर एक बनावट लागू करना है। रंग निर्दिष्ट करने के लिए, एक आकृति चुनें और पर क्लिक करें रंग की गुण फलक में फ़ील्ड। ट्रिडिव आपको किसी आकृति के प्रत्येक चेहरे के लिए अलग-अलग रंग निर्दिष्ट करने की अनुमति देता है, लेकिन, इस उदाहरण में, हमें सभी चेहरों का रंग बदलने के लिए सभी फ़ील्ड का उपयोग करने की आवश्यकता है। ऐसा करने के लिए, बस फ़ील्ड में एक हेक्स रंग कोड दर्ज करें, फिर दबाकर पुष्टि करें दर्ज.
इस उदाहरण में उपयोग किए गए रंग यहां दिए गए हैं:
आधार: #0099FF फीट, बटन, अक्ष, बांह और सिर: #F2EEE5 डिस्क: #fa7f7a
विनाइल की बनावट के लिए, प्रक्रिया रंग निर्दिष्ट करने के समान है। डिस्क सिलेंडर का चयन करें, फिर पर क्लिक करें इमेजिस गुण फलक में फ़ील्ड। उस छवि का URL पेस्ट करें जिसे आप शीर्ष फ़ील्ड में विनाइल पर लागू करना चाहते हैं और दबाकर पुष्टि करें दर्ज. आप अपनी खुद की एक छवि का उपयोग कर सकते हैं, या इस उदाहरण में उपयोग की गई छवि को डाउनलोड कर सकते हैं।
अब आपके पास ऐसा कुछ होना चाहिए जो इस तरह दिखता हो।
प्रतिपादन और निर्यात
अब जब टर्नटेबल हो गया है, तो हम उस तरीके पर काम करने जा रहे हैं जिस तरह से इसे निर्यात करने से पहले प्रस्तुत किया गया है। दबाएं पूर्वावलोकन गुण फलक के शीर्ष पर स्थित बटन। ज़ूम मान को . पर सेट करें 200 टर्नटेबल को बड़ा दिखाने के लिए। आकृतियों की काली सीमाएँ हटाने के लिए, पर जाएँ सीमाओं फलक का अनुभाग और अपारदर्शिता को सेट करें 0. परिणाम कुछ इस तरह दिखना चाहिए।
हम चाहते हैं कि टर्नटेबल ऊपर से जले। ऐसा करने के लिए, दृश्य को इस तरह घुमाएं कि टर्नटेबल का शीर्ष आपके सामने हो। आधार पूरी तरह से आयताकार दिखना चाहिए। गुण फलक के tridiv.com/d/4k6अनुभाग में प्रकाश और अंधेरे मानों को बदलने से दृश्य के भीतर छाया पुन: उत्पन्न हो जाएगी। प्रकाश मान को . में बदलें 0.
टर्नटेबल अब निर्यात के लिए तैयार है!
लोगो को खत्म करना
हम लोगो में टेक्स्ट जोड़ने और लोगो एनिमेशन बनाने के लिए तैयार हैं। दबाएं संपादित करें के नीचे बाईं ओर कोडपेन बटन पर पूर्वावलोकन कोडपेन को कोड निर्यात करने के लिए देखें। यह ध्यान रखना महत्वपूर्ण है कि ट्रिडिव द्वारा उत्पन्न सीएसएस कोड विक्रेता उपसर्गों का उपयोग नहीं करता है, इसलिए आपको प्रत्येक ब्राउज़र में कोड को कार्यात्मक बनाने के लिए प्रीफिक्सर.com या लीवरौ.जीथब.io/prefixfree जैसे टूल का उपयोग करने की आवश्यकता होगी। JavaScript फलक को बंद करके प्रारंभ करें, क्योंकि हम इसका उपयोग नहीं करने जा रहे हैं। HTML फलक में, पर लागू शैली टैग को हटा दें दृश्य विभाग
CSS फलक का विस्तार करें और अंत में निम्नलिखित कोड जोड़ें:
दृश्य {रूपांतरण: अनुवाद वाई (-140 पीएक्स) रोटेटएक्स (-55 डिग्री); }
यहां ही अनुवादवाई(-140px) टर्नटेबल को 140px ऊपर की ओर ले जाता है, इसके नीचे टेक्स्ट के लिए जगह छोड़ता है। फिर रोटेटएक्स (-55 डिग्री) टर्नटेबल का लंबवत झुकाव सेट करता है।
टेक्स्ट जोड़ने के लिए, आपको a . जोड़ना होगा शीर्षक उद्घाटन के ठीक बाद div #त्रिदिव HTML फलक में div। अंदर, दो जोड़ें स्पैन> (.मुख्य-शीर्षक और .उप-शीर्षक), द्वारा अलग किया गया घंटा/>:
div id="tridiv"> div> स्पैन> TRIDIV/span> hr/> स्पैन> रिकॉर्ड्स/स्पैन> /div> ...
फिर आपको सही फोंट और शैलियों को लागू करने की आवश्यकता है। CSS फलक में, लोगो में उपयोग किए गए Open Sans फ़ॉन्ट को आयात करें, और पाठ तत्वों के लिए मूल शैलियाँ जोड़ें।
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300); /* टेक्स्ट ब्लॉक सेंटरिंग + बेसिक फॉन्ट स्टाइल */ टाइटल { पोजीशन: एब्सोल्यूट; शीर्ष: 50%; बाएं: 50%; मार्जिन: 0 0 0 -165px; चौड़ाई: 330px; ऊंचाई: 5em; फ़ॉन्ट-परिवार: 'ओपन सेन्स', सेन्स-सेरिफ़; फ़ॉन्ट-वजन: 300; फ़ॉन्ट-आकार: 24px; पाठ-संरेखण: केंद्र; लेटर-स्पेसिंग: 1.5em; रंग: #0099FF; } शीर्षक घंटा { सीमा: 1px ठोस #fa7f7a; मार्जिन: .75em 0; } शीर्षक अवधि {प्रदर्शन: ब्लॉक; } .मुख्य-शीर्षक { फ़ॉन्ट-आकार: 2.15em; } .उप-शीर्षक { टेक्स्ट इंडेंट: .25em; }
वोइला! आपका लोगो पूरा हो गया है। यह नीचे दी गई छवि की तरह कुछ दिखना चाहिए। एक बार आपका 3D मॉडल हो जाने के बाद, आप शैलियों, एनिमेशन या माउस ईवेंट को जोड़कर इसे और भी बेहतर बनाने के लिए CSS की शक्ति का उपयोग कर सकते हैं: बस किसी अन्य HTML तत्व की तरह 3D मॉडल का इलाज करें।
लोगो को चेतन करें
यहां लोगो का उपयोग करके एक एनीमेशन देखें। टर्नटेबल 'गिरने' के हिस्से के रूप में, उनमें से प्रत्येक एक ही कीफ़्रेम एनीमेशन को अलग-अलग देरी के साथ साझा करता है। आकृतियों में शीर्ष विशेषता सेट है 50%. गिरते प्रभाव को बनाने के लिए, हम शीर्ष विशेषता को एनिमेट करते हैं -400px सेवा मेरे 50%:
@keyframes गिरते हैं { 0% {शीर्ष: -400px; } /* हम आकृति को ४००px */ १००% {शीर्ष: ५०%; } /* फिर हम इसे उसकी मूल स्थिति पर समाप्त करते हैं */ }
आप इस एनिमेशन को सभी आकृतियों में इस प्रकार जोड़ सकते हैं:
आकार {शीर्ष: -400px; एनिमेशन: फॉल 1s ईज़ी 0s फ़ॉरवर्ड; }
शीर्ष विशेषता को पर सेट करें -400px और देरी जोड़ें:
.प्लेटर {एनीमेशन-देरी: 1.05s; } .disc { एनिमेशन-देरी: १.३५; } .बटन { एनिमेशन-देरी: १.५s; } ...
का उपयोग करके अंतिम 'बाउंस' प्रभाव बनाएं रोटेटएक्स विशेषता:
90% {रूपांतरण: अनुवाद वाई (-5em) घुमाएँX (780deg) घुमाएँY (0deg); } ९५% { ट्रांस्फ़ॉर्म: ट्रांसलेट वाई (-4em) रोटेटएक्स (६२० डिग्री) रोटेट वाई (० डिग्री); } १००% {रूपांतरण: translationY (-४.५em) रोटेटएक्स (६६० डिग्री) घुमाएँ वाई (० डिग्री); }
इस तरह हमने इस विशेष संस्करण को बनाया, लेकिन याद रखें: कोई सीमा नहीं है!
शब्दों: जूलियन गार्नियर
यह आलेख मूल रूप से नेट पत्रिका अंक २४८ में छपा था।
