Make interactive 3D typography effects

Sep 13, 2025

कैसे करना है

टाइपोग्राफी ने हमेशा किसी भी डिजाइनर के टूल्स के शस्त्रागार में एक प्रमुख भूमिका निभाई है क्योंकि वे सही टाइपफेस का चयन करते हैं जो संदेश को बढ़ाएगा और जो संवाद किया जा रहा है उसके लिए सही संदर्भ प्रस्तुत करेगा। पिछले आठ वर्षों में, वेब डिजाइनरों को लाने की क्षमता है कस्टम टाइपफेस जैसे कि काइनेटिक टाइपोग्राफी उनके डिजाइन के लिए और प्रिंट डिजाइनरों द्वारा आनंदित लोगों के लिए समान टाइपोग्राफ़िकल नियंत्रण है।

उन साइटों पर एक नज़र डालें जिन्हें पुरस्कार विजेता या 'दिन की साइट' शीर्षक प्राप्त करने के रूप में दिखाया गया है और आप जल्द ही देखेंगे कि टाइपोग्राफी का उनका उपयोग डिजाइन के लिए केंद्रीय हो जाता है, जिससे उन्हें अपनी प्रतिस्पर्धा से ऊपर उठने की इजाजत मिलती है। यह एनिमेटेड पत्र फॉर्म, उपयोगकर्ता इंटरैक्शन के लिए प्रतिक्रियाशील आंदोलन से हो सकता है, प्रकार फॉर्म लेने के प्रकार के प्रकार के रूप में केंद्र चरण (अपनी टाइपोग्राफी फाइलों को सुरक्षित रखें) [2 9] घन संग्रहण

)।

यदि आप शून्य झगड़े के साथ एक ध्यान खींचने वाली साइट बनाना चाहते हैं, तो कोशिश करें [2 9] वेबसाइट निर्माता

भी। और सुनिश्चित करें कि आपकी साइट का प्रदर्शन शीर्ष के साथ अनुकूलित किया गया है [2 9] वेब होस्टिंग ।

3 डी फ़ॉन्ट्स: 9 शीर्ष प्रकार युक्तियाँ

इस ट्यूटोरियल में, प्रकार का प्रभाव अक्षरों के आकार को कुछ तेज़, मुक्त प्रवाह वाले कणों के निशान के रूप में उपयोग करेगा जो गतिशील रूप से घूमने और अक्षरों के माध्यम से आगे बढ़ेगा। न केवल यह सुंदर एनीमेशन होगा, लेकिन इस पर यह प्रस्तुत किया जाएगा एचटीएमएल 5 कैनवास तत्व, यह स्क्रीन के चारों ओर घूमने के लिए माउस की ओर घूमने के लिए 3 डी में परिवर्तित हो जाएगा। यह साइट हेडर के लिए बिल्कुल सही है या जब आपको कॉल टू एक्शन के लिए उपयोगकर्ता का ध्यान आकर्षित करने की आवश्यकता होती है।

यहां ट्यूटोरियल फ़ाइलें डाउनलोड करें

01. प्रक्रिया शुरू करें

अपने कोड आईडीई में प्रोजेक्ट फ़ाइलों से 'स्टार्ट' फ़ोल्डर खोलें। प्रोजेक्ट कण ऑब्जेक्ट क्लास बनाकर शुरू करने जा रहा है। इसका उपयोग परियोजना में पाठ के भीतर बहती इमेजरी बनाने के लिए किया जाएगा। 'Sketch.js' फ़ाइल खोलें और आधार कण बनाने के लिए निम्न चर जोड़ें।

 समारोह कण () {
  यह.पोस = क्रिएटेक्टर (यादृच्छिक (चौड़ाई), यादृच्छिक ((ऊंचाई - 100)));
  यह। वेल = क्रिएटेक्टर (0, 0);
  this.acc = createvector (0, 0);
  this.maxspeed = maxspeed;
  this.prevpos = this.pos.copy ();

[6 9]

बनाया जा रहा प्रभाव को पी 5.जेएस लाइब्रेरी द्वारा बड़े पैमाने पर मदद की जाती है जो एचटीएमएल 5 कैनवास तत्व को ड्राइंग करने के लिए कई सहायकों को सक्षम बनाता है

02. कण को अपडेट करें

कण को स्थानांतरित करने के लिए, एक अद्यतन फ़ंक्शन प्रत्येक फ्रेम को चलाएगा, यह कण की वेग और वेग के त्वरण का उपयोग करेगा। अंततः वेग को वैश्विक चर द्वारा सीमित किया जाएगा जिसे बाद में जोड़ा जाएगा। वेग को व्यक्तिगत कण की स्थिति में जोड़ा जाता है। एक कण बनाकर, किसी भी समय स्क्रीन पर कई हजार बनाए जाएंगे।

 इस। अपडेट = फ़ंक्शन () {
  this.vel.add (यह .acc);
  this.vel.limit (this.maxspeed);
  this.pos.add (यह .vel);
  this.acc.mult (0);
  }

03. प्रवाह के साथ जाओ

कणों को उनके बहने वाले आंदोलन को देने के लिए, शोर द्वारा उत्पन्न प्रवाह क्षेत्र का पालन किया जाएगा। यहां बनाया गया फ़ंक्शन फ्लो के वेक्टर को पारित करने में सक्षम बनाता है और इसके बाद इसका पालन किया जाएगा, इसलिए इस फ़ंक्शन का नाम। वेक्टर दिशा की शक्ति कण पर लागू की जाएगी।

 इस .follow = समारोह (वैक्टर) {
  var x = flon (this.pos.x / scl);
  var y = flon (this.pos.y / scl);
  var सूचकांक = x + y * cols;
  var बल = वैक्टर [अनुक्रमणिका];
  this.applyforce (बल);
  }

04. का पालन करें लेकिन बहुत बारीकी से नहीं

सभी कणों को एक साथ झुकाव को रोकने के लिए, जो इस तरह के आंदोलन के साथ आसानी से हो सकता है, कणों में उनकी स्थिति में बहुत कम यादगार यादृच्छिकता होगी। इससे थोड़ी मात्रा में बिखरने का कारण बन जाएगा।

 यह .Scatter = फ़ंक्शन (वैक्टर) {
  this.pos.x + = यादृच्छिक (-0.9, 0.9);
  this.pos.y + = यादृच्छिक (-0.9, 0.9);
  }
  this.applyforce = समारोह (बल) {
  this.acc.dad (बल);
  }

05. कण प्रदर्शित करें

शो फ़ंक्शन यहां कण प्रदर्शित करता है। पहली बात यह है कि यह लाइन बनाने के लिए हल्के भूरे रंग के रंग का एक पिक्सेल स्ट्रोक जोड़ें। रेखा पिछले फ्रेम पर अपनी वर्तमान स्थिति से अपनी अंतिम स्थिति तक खींची जाती है। पिछली स्थिति अगली बार लूप के माध्यम से संग्रहीत की जाती है।

 यह.शो = समारोह () {
  स्ट्रोक (180);
  स्ट्रोकवेट (1);
  लाइन (this.pos.x, this.pos.y, this.prevpos.x, यह .prevpos.y);
  this.updateprev ();
  }
  this.updateprev = फ़ंक्शन () {
  this.prevpos.x = this.pos.x;
  this.prevpos.y = this.pos.y;
  }

06. चारों ओर लपेटो

यदि कण स्क्रीन के किनारे तक पहुंचता है, तो किनारों का काम करता है और यदि हां, तो इसे विपरीत दिशा में आने के लिए चारों ओर लपेटता है। यह अनुभाग एक्स स्थिति से संबंधित है, इसलिए यह पता लगा रहा है कि यह स्क्रीन की चौड़ाई से अधिक है, फिर इसे बाएं किनारे पर भेजना और इसके विपरीत।

 इस प्रकार = समारोह () {
  यदि (this.pos.x & gt; चौड़ाई) {
  this.pos.x = 0;
  this.updateprev ();
  }
  अगर (this.pos.x & lt; 0) {
  this.pos.x = चौड़ाई;
  this.updateprev ();
  }

07. रैपर की खुशी

यह कोड किनारे का पता लगाने का शेष है और यह स्क्रीन के ऊपर और नीचे के लिए वाई अक्ष पर कण का पता लगाता है। यहां के कोष्ठक पूरे कण वर्ग को लपेटते हैं। इसका मतलब इस वर्ग का उपयोग करके कई कण बनाए जा सकते हैं।

 अगर (इस .pos.y & gt; ऊंचाई) {
  this.pos.y = 0;
  this.updateprev ();
  }
  अगर (this.pos.y & lt; 0) {
  this.pos.y = ऊंचाई;
  this.updateprev ();
  }
  }
}

08. कई कण बनाओ

अब जब कण बनाया जाता है तो कई कण बनाने के बारे में सोचने का समय होता है। ऐसा करने के लिए हमारे सभी कोड कण फ़ंक्शन क्लास के ऊपर जा सकते हैं। यहां सिस्टम को चलाने में सक्षम बनाने के लिए कई वैश्विक चर घोषित किए जाते हैं। उन्हें कोड के दौरान कई बार बुलाया जाएगा, इसलिए उन्हें तब खोजा जा सकता है।

 var inc = 0.1;
var scl = 100, zoff = 0;
var cols, पंक्तियों, आंदोलन = 0;
var कण = [];
var प्रवाह क्षेत्र;
var img;
var maxspeed;
var t, calcx = 0, calcy = 0, currx = 0, करी = 0, targetx = 0, tardy = 0;

09. इसे सब सेट करें

सेटअप फ़ंक्शन, यहां घोषित किया गया है, सेट करता है कि स्क्रीन शुरुआत को कैसे देखेंगे। पहला पता लगाने के लिए यह देखना है कि स्क्रीन की चौड़ाई क्या है। यदि यह अपेक्षाकृत बड़ा है, तो एक बड़ी छवि लोड की जाती है, कैनवास बनाया जाता है और इसे डिस्प्ले के भीतर फिट करने के लिए सीएसएस के माध्यम से स्केल किया जाता है।

 फ़ंक्शन सेटअप () {
  अगर (विंडोविड्थ और जीटी; 1200) {
  img = LoadImage ("संपत्ति / studio.png");
  वर कैनवास = CreateCanvas (1920, 630);
  मैक्सस्पीड = 10.5;
  }

10. अन्य स्क्रीन

बाकी के कथन विभिन्न स्क्रीन संकल्पों की जांच करता है और उस स्क्रीन के आकार के लिए सबसे उपयुक्त छवि लोड करता है। इसी प्रकार अलग-अलग आकार के कैनवास तत्व बनाए जाते हैं। यह मुख्य रूप से एक मोबाइल से अधिक पिक्सल के साथ एक मोबाइल से निपटने के लिए है।

 और अगर (विंडोविड्थ और जीटी; 900) {
  img = LoadImage ("संपत्ति / स्टूडियो-टैबलेट-wide.png");
  वर कैनवास = CreateCanvas (1200, 3 9 4);
  SCL = 60;
  maxspeed = 7;
  } अन्य {
  img = LoadImage ("संपत्ति / स्टूडियो-टैबलेट-लंबा");
  वर कैनवास = CreateCanvas (700, 230);
  SCL = 40;
  मैक्सस्पेड = 5;
  }

11. एक ग्रिड बनाओ

एक बार स्क्रीन आकार का काम किया जाता है तो कैनवास को HENDE.HTML पृष्ठ में हेडर डिवी टैग के अंदर रखा जाता है। चौड़ाई और ऊंचाई के आधार पर कई कॉलम और पंक्तियां काम की जाती हैं; यह एक अदृश्य ग्रिड की तरह थोड़ा है। अंत में, प्रवाह क्षेत्र के लिए एक सरणी निर्धारित है।

 कैनवास। Parent ('हेडर');
Cols = मंजिल (चौड़ाई / एससीएल);
पंक्तियों = मंजिल (ऊंचाई / एससीएल);
फ्लोफील्ड = नई सरणी (कोल्स);

12. कण बनाओ

स्क्रीन की चौड़ाई के आधार पर कणों की संख्या की स्थापना की जाती है - यदि स्क्रीन 1 9 20 पिक्सेल चौड़ी है तो 2500 कण बनाए जाएंगे और यह वहां से नीचे की ओर बढ़ता है। एक लूप के लिए नए कण बनाता है। स्क्रीन का पृष्ठभूमि रंग लगभग पूर्ण सफेद पर सेट है।

 var numparticles = math.floor ((2500/1920) * चौड़ाई);
  के लिए (var i = 0; i & lt; numparticles; i ++) {
  कण [i] = नया कण ();
  }
  पृष्ठभूमि (245);
}

13. स्क्रीन ड्रा करें

सभी गणनाओं के परिणाम ड्रॉ फ़ंक्शन में प्रत्येक फ्रेम स्क्रीन पर खींचे जाते हैं। सबसे पहले, एक बहुत कम अस्पष्टता के साथ एक हल्का भूरा आयताकार स्क्रीन को पहले खींचा गया है फीका करने के लिए भर देता है। इसके बाद खींचा जाता है, भरण बंद कर दिया जाता है क्योंकि कण स्ट्रोक से बने होते हैं।

 फंक्शन ड्रा () {
  nostroke ();
  भरें (245, 10);
  रेक्ट (0, 0, चौड़ाई, ऊंचाई);
  भरना नहीं();
  var yoff = 0;

14. एक प्रवाह प्रभाव बनाएँ

प्रवाह प्रभाव प्राप्त करने के लिए शोर मानों को अद्यतन करने के लिए पंक्तियों और स्तंभों के माध्यम से चल रहे दो 'के लिए' लूप हैं। फिर इनमें शोर मूल्य से कोणों में बदल दिया जाता है ताकि स्क्रीन पर प्रत्येक पद के लिए कणों को अद्यतन करने के लिए तैयार किया जा सके।

 के लिए (var y = 0; y & lt; पंक्तियों; y ++) {
  var xoff = 0;
  के लिए (var x = 0; x & lt; cols; x ++) {
  var सूचकांक = (x + y * cols);
  var कोण = शोर (Xoff, yoff, zoff) * दो_pi * 4;
  var v = p5.vector.fromangle (कोण);

15. सरणी को अद्यतन करें

प्रवाह की सरणी कोण के साथ अद्यतन किया जाता है और मान बढ़ जाते हैं ताकि प्रत्येक स्थिति की ऑफसेट हर बार बढ़ी हो। यह जटिल प्रतीत हो सकता है लेकिन यह वास्तव में स्क्रीन पर अनुसरण करने के लिए कणों के लिए यादृच्छिक बहती गति बनाता है।

 v.SetMag (1);
  फ्लोफील्ड [अनुक्रमणिका] = वी;
  Xoff + = इंक;
  }
  yoff + = इंक;
  ZOFF + = 0.001;
  }

16. कणों को अद्यतन करें

अब कण सभी अपने सरणी में लूप हो गए हैं। प्रत्येक व्यक्तिगत कण को प्रवाह फ़ील्ड का पालन करने के लिए कहा जाता है, अद्यतन करने के लिए, स्क्रीन के किनारों की जांच करने के लिए, थोड़ा तितर-बितर और अंत में शो फ़ंक्शन का उपयोग करके स्क्रीन पर खींचा जाना चाहिए। फ़ाइल को सहेजें और कणों को देखने के लिए 'index.html' का परीक्षण करें।

 के लिए (var i = 0; i & lt; particles.length; i ++) {
  कण [i]। फॉलो (फ्लोफील्ड);
  कण [i]। अपडेट ();
  कण [i] .edges ();
  कण [i]। उत्तर ();
  कण [i] .show ();
  }
}

17. पाठ जोड़ें

पाठ एक मुखौटा है जो शीर्ष पर रखा गया है। ऐसा करने के लिए, सही छवि कणों के शीर्ष पर रखी गई है। ड्रा फ़ंक्शन के समापन ब्रेस से पहले इस कोड को जोड़ें। अब पाठ के साथ काम करने वाले प्रभाव को देखने के लिए ब्राउज़र को सहेजें और जांचें।

 छवि (आईएमजी, 0, 0);

18. माउस की स्थिति का पता लगाएं

माउस की स्थिति का संदर्भ दिया जाता है और एक्स और वाई मानों को डिग्री कोणों पर मैप किया जाता है जिसे स्थानांतरित किया जा सकता है। वाई धुरी पर यह -25 से 25 होगा और एक्स अक्ष के लिए इसके विपरीत होगा। ड्रा फ़ंक्शन के अंत से पहले, शेष कोड को अंतिम कोड जोड़ने के बाद रखा जाना चाहिए।

 targyy = math.round (मानचित्र (माउसक्स, 0, चौड़ाई, -25, 25));
targetx = math.round (मानचित्र (माउस, 0, ऊंचाई, 25, -25));

19. जगह में आसानी

लक्ष्य स्थिति अब थोड़ा आसान हो गई है ताकि डिग्री धीरे-धीरे अपने लक्ष्य तक पहुंच सकें। यह गंतव्य से वर्तमान स्थिति को दूर करने और कम संख्या से गुणा करने के क्लासिक आसान एल्गोरिदम का उपयोग करके बनाया गया है।

 var vx = (targetx - currx) * 0.05;
var vy = (tibly - करी) * 0.05;
CalcX + = VX;
कैल्सी + = vy;

20. सीएसएस लिखें

यहां 'टी' चर गणना मूल्यों को लेता है और रोटेटेक्स और घूर्णी के परिवर्तन मानों का उपयोग करके उन्हें एक सीएसएस स्ट्रिंग में रखता है। वर्तमान स्थिति की गणना उस स्थिति से की जाती है जिसे कैनवास वर्तमान में घुमाया जाता है।

 टी = 'रोटेटेक्स (' + कैल्सक्स + 'डीईजी) घूर्णी (' + कैल्सी + 'डीईजी)';
currx = calcx;
करी = कैल्सी;

[26 9]

कोड का अंतिम खंड माउस की स्थिति लेता है और कैनवास तत्व में एक सीएसएस रूपांतरण लागू करता है। यह 3 डी स्पेस में माउस की ओर कैनवास को घुमाता है

21. समाप्त

अब सीएसएस इस कोड में कैनवास तत्व पर लागू होता है। पृष्ठ को सहेजें और ब्राउज़र में इसका पूर्वावलोकन करें। अब माउस पूरी तरह से कैनवास के घूर्णन को अद्यतन करता है ताकि यह माउस चाल के रूप में बदल जाए। बेशक उस जगह में सभी कण स्क्रीन पर इसके साथ चलते हैं।

 कैनवास। Style.webkittransform = t;
canvas.style.mstransform = t;
canvas.style.transform = t;

यह लेख मूल रूप से क्रिएटिव वेब डिज़ाइन पत्रिका वेब डिज़ाइनर में प्रकाशित किया गया था। खरीद अंक 271 या [2 9 4] सदस्यता लेने के

।

[2 9] संबंधित आलेख:

डिजाइनरों के लिए 70 सर्वश्रेष्ठ मुफ्त फ़ॉन्ट्स
सही ऑनलाइन पढ़ने के अनुभव के लिए 6 कदम
मुफ्त ऑनलाइन उपकरण आपको दिखाता है कि आपके फोंट क्या कर सकते हैं

Make interactive 3D typography effects

01. प्रक्रिया शुरू करें

02. कण को अपडेट करें

03. प्रवाह के साथ जाओ

04. का पालन करें लेकिन बहुत बारीकी से नहीं

05. कण प्रदर्शित करें

06. चारों ओर लपेटो

07. रैपर की खुशी

08. कई कण बनाओ

09. इसे सब सेट करें

10. अन्य स्क्रीन

11. एक ग्रिड बनाओ

12. कण बनाओ

13. स्क्रीन ड्रा करें

14. एक प्रवाह प्रभाव बनाएँ

15. सरणी को अद्यतन करें

16. कणों को अद्यतन करें

17. पाठ जोड़ें

18. माउस की स्थिति का पता लगाएं

19. जगह में आसानी

20. सीएसएस लिखें

21. समाप्त

कैसे करना है - सर्वाधिक लोकप्रिय लेख

एक भेड़िया कैसे आकर्षित करें

How to create a video game character in ZBrush

The rules of responsive web typography

Create dynamic movement in a composition

How to paint fantasy beasts

तेल में गीले-ऑन-गीले पेंट

आयु फ़ोटोशॉप सीसी में एक तस्वीर

Modelling complex geometry: 5 top tips

श्रेणियाँ

Make interactive 3D typography effects

01. प्रक्रिया शुरू करें

02. कण को ​​अपडेट करें

03. प्रवाह के साथ जाओ

04. का पालन करें लेकिन बहुत बारीकी से नहीं

05. कण प्रदर्शित करें

06. चारों ओर लपेटो

07. रैपर की खुशी

08. कई कण बनाओ

09. इसे सब सेट करें

10. अन्य स्क्रीन

11. एक ग्रिड बनाओ

12. कण बनाओ

13. स्क्रीन ड्रा करें

14. एक प्रवाह प्रभाव बनाएँ

15. सरणी को अद्यतन करें

16. कणों को अद्यतन करें

17. पाठ जोड़ें

18. माउस की स्थिति का पता लगाएं

19. जगह में आसानी

20. सीएसएस लिखें

21. समाप्त

कैसे करना है - सर्वाधिक लोकप्रिय लेख

श्रेणियाँ

02. कण को अपडेट करें