सामग्री
- प्रारंभ करणे
- टर्नटेबलचा आधार तयार करणे
- पाय तयार करणे
- हात आणि डोके
- रंग आणि पोत
- प्रस्तुत आणि निर्यात
- लोगो पूर्ण करीत आहे
- लोगो सजीव करा
वेबवर थ्रीडी animaनिमेशन तयार करण्याचे बरेच मार्ग आहेत, त्यापैकी बहुतेकांना जावास्क्रिप्ट आणि वेबजीएलचे चांगले ज्ञान आवश्यक आहे किंवा फ्लॅश सारख्या प्लग-इनचा वापर आवश्यक आहे. सीएसएस 3 डी रूपांतरांबद्दल धन्यवाद, केवळ एचटीएमएल आणि सीएसएस वापरून 3 डी तयार करणे शक्य आहे, परंतु असे करणे सोपे नाही. ट्रिडिव्ह, माझे विनामूल्य ऑनलाइन अॅप, प्रक्रिया सुलभ करते, एक सोपी आणि अंतर्ज्ञानी डब्ल्यूवायएसआयडब्ल्यूजी इंटरफेस ऑफर करते जे वापरकर्त्यांना एका कोडची एक ओळ न लिहिता 3D ऑब्जेक्ट्स तयार करण्यास सक्षम करते.
या ट्यूटोरियलमध्ये, आम्ही केवळ एचटीएमएल आणि सीएसएस वापरुन ‘ट्रिडिव्ह रेकॉर्ड’, एक काल्पनिक रेकॉर्ड लेबल, लोगो तयार आणि एनिमेट करणार आहोत. लोगोचा मुख्य व्हिज्युअल त्रिदेव वापरुन 3 डी मध्ये तयार केला जाईल. नंतर आम्ही नियमित एचटीएमएल आणि सीएसएस वापरून टायपोग्राफिक घटक जोडू.
आपण येथे अंतिम अ‍ॅनिमेशन आणि तो व्युत्पन्न केलेला कोड पाहू शकता.
प्रारंभ करणे
आम्ही त्रिदेव वापरुन 3 डी मध्ये टर्नटेबल तयार करुन प्रारंभ करणार आहोत. Tridiv.com वर जा आणि अॅप लाँच करा. आपल्याला एकतर Chrome, सफारी किंवा ऑपेरा 15 (किंवा नंतर) वापरण्याची आवश्यकता असेल.
प्रारंभ करण्यापूर्वी, त्रिदेव इंटरफेस समजणे महत्वाचे आहे. संपादकाचा मुख्य विभाग चार दृश्यांसह बनलेला आहे: शीर्षस्थानी डावीकडे 3 डी दृश्य आहे, जे दृश्याचे संपूर्ण दृश्य प्रदान करते. इतर तीन दृश्ये ते वरुन, बाजू आणि समोर दर्शविते. ही तीन दृश्ये वापरुन आपण 3D आकार तयार करू, संपादित करू आणि हलवू शकता.
क्षैतिज टूलबार दोन भागात विभागलेला आहे: डावा भाग आपल्या दस्तऐवजाशी संबंधित माहिती प्रदर्शित करतो; उजव्या भागात आकार तयार आणि संपादित करण्यासाठी साधने आहेत. द हलवा निवड आणि सुधारणे निवड बटणे भिन्न संपादन मोडमध्ये स्विच करतात.
गुणधर्म उपखंड (साइडबार) दस्तऐवज सेटिंग्ज जसे की ग्रीडवर झूम आणि स्नॅप आणि निवडलेल्या आकाराचे गुणधर्म (आकार, स्थिती, फिरविणे, रंग इत्यादी) दाखवतात. परिमाण आणि स्थितीसाठी वापरलेले एकक ईएमएस आहे; रोटेशन कोन अंश आहेत.
ट्यूटोरियल मध्ये नंतर कोणताही गोंधळ टाळण्यासाठी, आम्ही पुढील शॉर्टहँड वापरणार आहोत:
डब्ल्यू = रुंदी एच = उंची डी = खोली डायम = व्यास एक्स डीएजी = एक्स-अक्षामध्ये रोटेशन वाय डीजी = वाय-अक्षामध्ये रोटेशन झेड डीजी = झेड-अक्षामध्ये फिरणे
टर्नटेबलचा आधार तयार करणे
झूम मूल्य 200 वर सेट करुन प्रारंभ करा. आकार काढण्यास मदत करण्यासाठी, मध्ये मध्ये ग्रिड सेटिंगमध्ये स्नॅप सक्रिय करा दस्तऐवज सेटिंग्ज साइडबारचा विभाग स्नॅप मूल्य यावर सेट करा 0.125.
टर्नटेबलचा आधार साध्या क्यूबॉइडसह बनलेला आहे, म्हणून क्लिक करा क्यूबॉइड घाला शीर्ष टूलबारमधील बटण. आपण संपादकाच्या चारही दृश्यांमध्ये क्यूबॉइड दिसला पाहिजे.
आकाराचे नाव बदला पाया गुणधर्म उपखंडाचे नाव फील्ड वापरणे (अंतर्गत आकार गुणधर्म). आकाराचे नाव वैध CSS वर्गाचे नाव असले पाहिजे कारण ते संपादकाद्वारे व्युत्पन्न केलेल्या कोडमध्ये वापरले जाईल. लोगो अ‍ॅनिमेट करताना आम्ही नंतर या वर्गांची नावे वापरू म्हणजे आपण तयार केलेल्या प्रत्येक नवीन आकाराचे आपण नाव घेत असल्याची खात्री करा.
एकदा क्युबॉइडला नाव दिल्यानंतर, ते वरच्या दृश्यात निवडलेले असल्याची खात्री करा (ते निळ्यामध्ये हायलाइट केले जावे, त्याच्या सभोवतालच्या साधनांच्या गोलाकार रिंगने), त्यानंतर क्लिक करा सुधारणे संपादनेची हँडल्स दर्शविण्यासाठी रिंगच्या शीर्षस्थानी बटण. रुंदी आणि खोली पोहोच होईपर्यंत क्युबॉइडच्या बाजूने कंट्रोल हँडल ड्रॅग करा डब्ल्यू = 10 आणि डी = 8 मध्ये आकार गुणधर्म.
साइड व्ह्यूच्या आतील बाजूस क्लिक करा. हे या दृश्यात संपादनेची हँडल दर्शविते, ज्यामुळे आम्हाला त्याची उंची बदलण्याची अनुमती मिळते. उंचीपर्यंत पोहोचेपर्यंत समायोजित करा एच = 2. आपण प्रॉपर्टी उपखंडात थेट मूल्ये देखील टाइप करू शकता. क्युबॉइडच्या कोप round्यावर फेरी मारण्यासाठी, गुणधर्म उपखंडातील कोपरे मूल्ये बदला 1.75, नंतर दाबा [प्रविष्ट करा] बदल लागू करण्यासाठी की. आपल्याकडे असे काहीतरी असेल.
पाय तयार करणे
टर्नटेबलच्या पायासाठी आम्ही सिलिंडर वापरणार आहोत. एक सिलेंडर जोडा, नंतर त्याचा व्यास बदला डायम = 1.75 आणि त्याची उंची एच = 0.5. वर क्लिक करा हलवा आकारातील ड्रॅग करण्यायोग्य क्षेत्र दर्शविण्यासाठी शीर्ष टूलबारमधील निवड बटण. सिलेंडर बेसच्या खाली हलवा, एका कोपर्यात ठेवून. (आपल्याला त्यास वरच्या बाजूस आणि समोरच्या दृश्यांमध्ये हलविण्याची आवश्यकता असू शकेल.)
सिलेंडरची नक्कल करा (दाबा नक्कल साधनांच्या गोलाकार रिंगमधील बटण दाबा किंवा दाबा डी की) आणि नवीन सिलेंडर बेसच्या दुसर्‍या कोपर्यात हलविण्यासाठी. सर्व चार पाय योग्य स्थितीत येईपर्यंत प्रक्रियेची पुनरावृत्ती करा. सिलिंडरचे नाव देणे विसरू नका (उदाहरणार्थ, पाय-डावे-शीर्ष, पाय-उजवीकडे-वर, पाय-डावे-तळाशी, पाय-डावे-शीर्ष). आपण ते केल्यावर, परिणाम यासारखे दिसला पाहिजे.
आम्ही आता थाळी, डिस्क, आर्म अ‍ॅक्सिस आणि बटण तयार करण्याकडे पाहू. पुढील आकार तयार करण्याची प्रक्रिया पाय सारखीच आहे. वेगवेगळ्या सिलिंडर्ससाठी वापरलेले परिमाण येथे आहेत:
ताट: डायम = 7; एच = 0,5 डिस्क: डायम = 6.75; एच = 0,25 बटण: डायम = 1.5; एच = 0,25 आर्म-अक्सिस-बेस: डायम = 2.25; एच = 0,25 आर्म-अक्ष: डायम = 1.375; एच = 1
सिलेंडर्सच्या बाजू परिष्कृत करण्यासाठी आपण गुणधर्म उपखंडात साइड फील्ड वापरुन प्रत्येकाच्या चेह faces्यांची संख्या वाढवू शकता. बरीच बाजू जोडू नका कारण यामुळे संपादकाच्या जागतिक कामगिरीवर आणि अंतिम अ‍ॅनिमेशनवर नकारात्मक प्रभाव पडू शकतो. या प्रकरणात, मी तुम्हाला सल्ला देतो की प्लेटर आणि डिस्कसाठी 32 पेक्षा जास्त बाजू वापरू नयेत. आपल्याकडे असे काहीतरी असावे.
हात आणि डोके
आर्म आणि टर्नटेबलच्या डोक्यासाठी आम्ही क्यूबिड वापरणार आहोत. बाह्यासाठी क्यूबॉइड तयार करा (डब्ल्यू = 0.25; एच = 0.25; डी = 4) वर नंतर फिरवा लागू करा -33° वर वाय-अक्ष. डोके साठी, एक क्यूबॉइड तयार करा (डब्ल्यू = 0.5; एच = 0.5; डी = 1) वर नंतर फिरवा लागू करा -33° वर वाय-अक्ष. आर्म-अक्ष सिलेंडरने दोन्ही आकार संरेखित करा. परिणाम असा दिसला पाहिजे.
रंग आणि पोत
आम्ही जवळजवळ टर्नटेबल पूर्ण केले. अंतिम चरण म्हणजे रंग वाटप करणे आणि विनाइल (रेकॉर्डच्या पृष्ठभागाचे प्रतिनिधित्व करणारी एक प्रतिमा) वर एक पोत लागू करणे. रंग प्रदान करण्यासाठी, आकार निवडा आणि वर क्लिक करा रंग गुणधर्म उपखंडात फील्ड. त्रिदिव आपल्याला आकाराच्या प्रत्येक चेहर्यासाठी स्वतंत्र रंग निर्दिष्ट करण्याची परवानगी देतो, परंतु या उदाहरणात, आम्हाला सर्व चेह of्यांचा रंग बदलण्यासाठी सर्व फील्ड वापरण्याची आवश्यकता आहे. हे करण्यासाठी, फील्डमध्ये फक्त एक हेक्स रंग कोड प्रविष्ट करा, त्यानंतर दाबून पुष्टी करा प्रविष्ट करा.
या उदाहरणात वापरलेले रंग येथे आहेत:
बेस: # 0099FF पाय, बटण, अक्ष, हात आणि डोके: # F2EEE5 डिस्क: # fa7f7a
विनाइलच्या रचनेसाठी, प्रक्रिया रंग प्रदान करण्याइतकीच आहे. डिस्क सिलेंडर निवडा, नंतर वर क्लिक करा प्रतिमा गुणधर्म उपखंडात फील्ड. शीर्ष फील्डमध्ये विनाइलवर आपण अर्ज करू इच्छित प्रतिमेची URL पेस्ट करा आणि दाबून पुष्टी करा प्रविष्ट करा. आपण आपल्या स्वतःची प्रतिमा वापरू शकता किंवा या उदाहरणात वापरलेली एक प्रतिमा डाउनलोड करू शकता.
आपल्याकडे आता असे काहीतरी असले पाहिजे.
प्रस्तुत आणि निर्यात
आता टर्नटेबल पूर्ण झाले आहे, आम्ही ते निर्यात करण्यापूर्वी ज्या मार्गाने प्रस्तुत केले आहे त्या मार्गावर कार्य करीत आहोत. क्लिक करा पूर्वावलोकन प्रॉपर्टीस पॅनच्या वरच्या बाजूला बटण. झूम मूल्य यावर सेट करा 200 टर्नटेबल मोठे प्रदर्शित करण्यासाठी. आकारांची काळी किनार काढण्यासाठी, वर जा सीमा उपखंडातील विभाग आणि अस्पष्टता यावर सेट करा 0. परिणाम यासारखे काहीतरी दिसले पाहिजे.
आम्हाला टर्नटेबल वरुन दिवे पाहिजे. हे करण्यासाठी, देखावा अशा प्रकारे फिरवा की टर्नटेबलच्या वरचा भाग आपल्यास तोंड देत असेल. बेस उत्तम प्रकारे आयताकृती दिसला पाहिजे. गुणधर्म उपखंडात tridiv.com/d/4k6 विभागातील हलकी व गडद मूल्ये बदलल्याने दृश्यामधील सावली पुन्हा निर्माण होईल. लाइट व्हॅल्यू मध्ये बदला 0.
टर्नटेबल आता निर्यात करण्यास तयार आहे!
लोगो पूर्ण करीत आहे
आम्ही लोगोमध्ये मजकूर जोडण्यासाठी आणि लोगो अ‍ॅनिमेशन तयार करण्यास सज्ज आहोत. क्लिक करा सुधारणे च्या डावीकडे तळाशी असलेल्या कोडपेन बटणावर पूर्वावलोकन कोडपेनवर कोड निर्यात करण्यासाठी पहा. हे लक्षात घेणे महत्वाचे आहे की त्रिदिव द्वारे व्युत्पन्न केलेला सीएसएस कोड विक्रेता उपसर्ग वापरत नाही, म्हणून प्रत्येक ब्राउझरमध्ये कोड कार्यान्वित करण्यासाठी आपल्याला प्रीफिक्सर डॉट कॉम किंवा लीवरौ.github.io/prefixfree सारखी साधने वापरण्याची आवश्यकता असेल. आम्ही त्याचा वापर करणार नसल्यामुळे, जावास्क्रिप्ट उपखंड बंद करून प्रारंभ करा. HTML उपखंडात, लागू केलेला शैली टॅग काढा .सिन Div
सीएसएस उपखंड विस्तृत करा आणि शेवटी पुढील कोड जोडा:
.सिन {ट्रान्सफॉर्मः ट्रान्सलेट वाई (-140 पीएक्स) रोटेटएक्स (-55 डीजी); }
येथे, द ट्रान्सलेट वाई (-140px)) टर्नटेबल 140 पीएक्स वरच्या बाजूस सरकवते, त्या खाली मजकूरासाठी जागा सोडून. त्या नंतर रोटेटएक्स (-55deg) टर्नटेबलचे अनुलंब झुकाव सेट करते.
मजकूर जोडण्यासाठी, आपल्याला एक जोडण्याची आवश्यकता आहे .title उघडण्याच्या नंतर उजवीकडे #tridiv एचटीएमएल उपखंडात div. आतमध्ये दोन जोडा spans> (.मेन-शीर्षक आणि .sub-शीर्षक) द्वारे विभक्त तास />:
div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div>…
त्यानंतर आपल्याला योग्य फॉन्ट आणि शैली लागू करण्याची आवश्यकता आहे. सीएसएस उपखंडात, लोगोमध्ये वापरलेला ओपन सन्स फॉन्ट आयात करा आणि मजकूर घटकांसाठी मूलभूत शैली जोडा.
@ आयपोर्ट यूआरएल (http://fouts.googleapis.com/css?family=Open+Sans:300); / * मजकूर ब्लॉक केंद्रीकरण + मूलभूत फॉन्ट शैली * / शीर्षक {स्थिती: परिपूर्ण; शीर्ष: 50%; डावा: 50%; समास: 0 0 0 -165px; रुंदी: 330px; उंची: 5 मी; फॉन्ट-फॅमिली: ‘ओपन सन्स’, सन्स-सेरिफ; फॉन्ट-वजन: 300; फॉन्ट-आकार: 24px; मजकूर-संरेखित करा: मध्यभागी; पत्र-अंतर: 1.5 मी; रंग: # 0099FF; h शीर्षक तास {सीमा: 1px सॉलिड # fa7f7a; मार्जिन: .75 एम 0; } शीर्षक कालावधी {प्रदर्शन: ब्लॉक; main .मेन-शीर्षक {फॉन्ट आकार: 2.15 म; s .सुब-शीर्षक {मजकूर-इंडेंटः .25 एम; }
Voilà! आपला लोगो पूर्ण झाला आहे. हे खाली असलेल्या प्रतिमेसारखे काहीतरी असले पाहिजे. एकदा आपले 3 डी मॉडेल पूर्ण झाले की आपण शैली, अ‍ॅनिमेशन किंवा माऊस इव्हेंट जोडून हे आणखी चांगले करण्यासाठी CSS ची सामर्थ्य वापरू शकता: 3 डी मॉडेलला इतर कोणत्याही एचटीएमएल घटकाप्रमाणेच वागवा.
लोगो सजीव करा
लोगो वापरुन अ‍ॅनिमेशन पहा. टर्नटेबलचे भाग ’पडणे’ म्हणून, त्यातील प्रत्येकजण वेगवेगळ्या विलंबांसह समान कीफ्रेम अ‍ॅनिमेशन सामायिक करतात. आकारांमध्ये वरचे गुणधर्म सेट केले आहेत 50%. घसरण प्रभाव तयार करण्यासाठी, आम्ही वरील शीर्षणाचे अ‍ॅनिमेट करतो -400px करण्यासाठी 50%:
@keyframes खाली {0% fall घसरण: -400px; } / * आम्ही अॅनिमेशनला आकार 400px * / 100% {उंचीवर पोझिशनिंग करण्यास प्रारंभ करतो: शीर्ष: 50%; } / * नंतर आम्ही हे त्याच्या मूळ स्थितीवर समाप्त करू * /}
आपण या अॅनिमेशनला सर्व आकारात जोडू शकता:
.शेप {टॉप: -400 पीएक्स; अ‍ॅनिमेशन: फॉल 1 एस 0 एस फॉरवर्ड सहज }
वरचे मुख्य विशेषता सेट करा -400px आणि विलंब जोडा:
.प्लाटर {अ‍ॅनिमेशन-विलंब: 1.05 से; d .डिस्क {अ‍ॅनिमेशन-विलंब: 1.35 से; b .बट्टन {अ‍ॅनिमेशन-विलंब: 1.5 से; } ...
वापरून अंतिम ‘बाऊन्स’ प्रभाव तयार करा रोटेटएक्स विशेषता:
90% {ट्रान्सफॉर्मः ट्रान्सलेट वाई (-5 एम) रोटेटएक्स (780 डीजी) रोटेट वाई (0 डीजी); } 95%; ट्रान्सफॉर्मः ट्रान्सलेट वाई (-4 एमएम) रोटेटएक्स (620 डीजी) रोटेट वाई (0 डीजी); } 100%; ट्रान्सफॉर्मः ट्रान्सलेट वाई (-4.5 मी) रोटेटएक्स (660 डीजी) रोटेट वाई (0 डीजी); }
अशाप्रकारे आम्ही ही विशिष्ट आवृत्ती तयार केली, परंतु लक्षात ठेवा: येथे काही मर्यादा नाहीत!
शब्दः ज्युलियन गार्नियर
हा लेख मूळतः नेट मासिक मासिक 248 मध्ये आला.
