Faites des effets de typographie 3D interactifs

Sep 11, 2025

Comment

[dix] [dix] [dix]

[dix]

La typographie a toujours joué un rôle majeur dans l'arsenal d'outils de tout concepteur, car ils sélectionnent la bonne police de caractères qui améliorera le message et présentera le bon contexte pour ce qui est communiqué. Au cours des huit dernières années, les concepteurs Web ont eu la capacité d'apporter caractères personnalisés tel que typographie cinétique à leur conception et avoir un contrôle typographique similaire à ceux qui connaissent des concepteurs d'impression.

[dix]

Jetez un coup d'œil à de nombreux sites qui sont présentés comme des titres primés ou recevant des «chantiers de la journée» et vous remarquerez bientôt que leur utilisation de la typographie devient au cœur de la conception, leur permettant de se soulever au-dessus de leur concurrence. Cela peut aller des formes de lettres animées, un mouvement réactif aux interactions utilisateur, à une utilisation audacieuse des formes de type prenant au centre de la scène (garder vos fichiers de typographie en sécurité stockage en ligne ).

Si vous voulez créer un site d'attraper de l'attention avec zéro Fuss, essayez un Générateur de site Web trop. Et assurez-vous que la performance de votre site est optimisée avec le dessus hébergement Web .

Polices 3D: 9 Conseils de type Top Type

Dans ce tutoriel, l'effet de type utilisera les formes des lettres en tant que masque sur des sentiers de particules rapides et fluides qui vont se tourner de manière dynamique et passent à travers les lettres. Non seulement il y aura cette belle animation, mais comme cela sera rendu sur le Toile HTML5 Élément, cela sera transformé en 3D pour faire pivoter la souris car elle se déplace autour de l'écran. Ceci est parfait pour les en-têtes de site ou juste lorsque vous devez saisir l'attention de l'utilisateur pour un appel à l'action.

Téléchargez les fichiers de tutoriel ici

[dix]

01. Démarrer le processus

Ouvrez le dossier 'Démarrer' dans les fichiers de projet de votre code IDE. Le projet va commencer par créer la classe d'objet de particules. Ceci sera utilisé pour créer l'imagerie fluide dans le texte du projet. Ouvrez le fichier 'sketch.js' et ajoutez la variable suivante pour commencer à créer la particule de base.

 Fonction particule () {
  ceci.pos = Createvector (aléatoire (largeur), aléatoire ((hauteur - 100)));
  ceci.vel = Createvector (0, 0);
  ceci.c = Createvector (0, 0);
  cela.MaxSpeed = maxpeed;
  cela.prevpos = ceci.Pos.copy ();

02. Mettez à jour la particule

Afin de déplacer la particule, une fonction de mise à jour sera exécutée chaque image, cela entraînera la vitesse de la particule et de l'accélération à la vitesse. La vélocité sera éventuellement limitée par une variable globale qui sera ajoutée plus tard. La vélocité est ajoutée à la position de la particule individuelle. En créant une particule, plusieurs milliers seront créées à l'écran à la fois.

 this.update = fonction () {
  cela.vel.add (ce.craacc);
  cela.vel.limit (this.maxspeed);
  ceci.pos.add (cela.vel);
  cela.acc.Mult (0);
  }

03. Allez avec le flux

Pour donner aux particules leur mouvement fluide, un champ d'écoulement généré par le bruit sera suivi. La fonction créée ici permet de transmettre le vecteur de flux et il sera ensuite suivi, d'où le nom de cette fonction. La force de la direction de vecteur sera appliquée à la particule.

 Cette.Collow = fonction (vecteurs) {
  var x = plancher (this.pos.x / SCL);
  var y = plancher (this.pos.y / SCL);
  Index var = x + y * cols;
  var force = vecteurs [index];
  cela.applyforce (force);
  }

04. Suivre mais pas trop étroitement

Afin d'empêcher toutes les particules, ce qui peut facilement se produire avec ce type de mouvement, les particules auront une très petite quantité de hasard ajoutée à leur position. Cela entraînera une légère quantité de dispersion.

 Ceci.Scatter = fonction (vecteurs) {
  ceci.pos.x + = aléatoire (-0,9, 0,9);
  ceci.pos.y + = aléatoire (-0,9, 0,9);
  }
  cette.ApplyForce = fonction (force) {
  cela.acc.Ajouter (force);
  }

05. Afficher la particule

La fonction show présente ici la particule. La première chose qu'il fait est d'ajouter une course de pixels d'une couleur gris clair pour créer la ligne. La ligne est dessinée de sa position actuelle à sa dernière position sur la trame précédente. La position précédente est stockée pour la prochaine fois par la boucle.

 Ceci.Show = fonction () {
  AVC (180);
  piew-avance (1);
  ligne (this.pos.x, ceci.pos.y, ceci.prevpos.x, cela.PRevos.y);
  cela.updateprev ();
  }
  cette.updateprev = fonction () {
  cela.prevpos.x = this.pos.x;
  cela.prevpos.y = ceci.pos.y;
  }

06. Envelopper

La fonction Bords fonctionne si la particule atteint le bord de l'écran et, le cas échéant, le déploie autour de l'autre côté. Cette section traite de la position X de sorte qu'il est détectée si elle est supérieure à la largeur de l'écran, puis en l'envoyant à gauche et inversement.

 this.edges = fonction () {
  Si (this.pos.x.x & gt; largeur) {
  ceci.pos.x = 0;
  cela.updateprev ();
  }
  Si (this.pos.x.x & lt; 0) {
  ceci.pos.x = largeur;
  cela.updateprev ();
  }

07. Le délice d'emballage

Ce code est le reste de la détection des bords et il détecte la particule sur l'axe Y pour le haut et le bas de l'écran. Les crochets ici enveloppent la classe de particules entière. Cela signifie en utilisant cette classe de nombreuses particules peuvent être créées.

 Si (ceci.pos.y & gt; hauteur) {
  ceci.pos.y = 0;
  cela.updateprev ();
  }
  if (this.pos.y & lt; 0) {
  ceci.pos.y = hauteur;
  cela.updateprev ();
  }
  }
}

08. faire de nombreuses particules

Maintenant, comme l'a créé la particule, il est temps de penser à faire de nombreuses particules. Pour ce faire, tout notre code peut aller au-dessus de la classe de fonctions de particules. Ici, un certain nombre de variables globales sont déclarées pour permettre au système de fonctionner. Ils seront appelés à divers moments pendant le code, afin qu'ils puissent ensuite être explorés.

 var inc = 0,1;
var SCL = 100, zoff = 0;
var cols, rangées, mouvement = 0;
var particules = [];
Var Flowfield;
var img;
var maxpeed;
Var T, CalcX = 0, Calcy = 0, Currex = 0, Curry = 0, TargetX = 0, Targety = 0;

09. Définir tout

La fonction de configuration, déclarée ici, définit la manière dont l'écran examinera le début. La première détection étant faite est de voir quelle est la largeur de l'écran. Si elle est relativement grande, une image importante est chargée, la toile est créée et celle-ci est mise à l'échelle via CSS pour s'adapter à l'écran.

 Configuration de la fonction () {
  Si (Windowwidth & GT; 1200) {
  img = loadimage ("atouts / studio.png");
  Var Canvas = CreeCanvas (1920, 630);
  maxpeed = 10.5;
  }

10. Autres écrans

Le reste de la déclaration IF vérifie différentes résolutions d'écran et charge une image la plus appropriée pour cette taille de l'écran. De même, des éléments de toile de taille différente sont créés. Ceci est principalement d'arrêter un mobile avec plus de pixels qu'il ne l'appelle.

 sinon si (Windowwidth & GT; 900) {
  img = loadimage ("actifs / studio-tablette-large.png");
  Var Canvas = CreeCanvas (1200, 394);
  SCL = 60;
  maxpeed = 7;
  } autre {
  img = loadimage ("Actifs / Studio-Tablet-Tall.png");
  Var Canvas = CreeCanvas (700, 230);
  SCL = 40;
  maxpeed = 5;
  }

[dix]

11. faire une grille

Une fois que la taille de l'écran est terminée, la toile est placée dans la balise DIFFORD div dans la page Index.html. Un certain nombre de colonnes et de lignes sont élaborées en fonction de la largeur et de la hauteur; C'est un peu comme une grille invisible. Enfin, un tableau est défini pour le champ d'écoulement.

 Canvas.Parent ("en-tête");
cols = étage (largeur / SCL);
rangées = plancher (hauteur / scl);
Flowfield = nouveau tableau (COLS);

12. faire des particules

Le nombre de particules est configuré en fonction de la largeur de l'écran - si l'écran est de 1920 pixels larges, puis de 2500 particules seront créées et se déplace vers le bas de là. A pour la boucle crée les nouvelles particules. La couleur de fond de l'écran est définie sur du blanc presque complet.

 var numparticles = math.floor ((2500/1920) * largeur);
  pour (var i = 0; i & lt; numparticules; i ++) {
  particules [i] = nouvelle particule ();
  }
  arrière-plan (245);
}

13. Dessinez l'écran

Les résultats de tous les calculs sont dessinés à l'écran chaque image dans la fonction de tirage. Premièrement, un rectangle de gris clair avec une opacité très faible remplit l'écran pour s'effacer ce qui a été dessiné précédemment. Une fois que cela est tiré, le remplissage est désactivé car les particules seront composées de coups non remplis.

 Fonction Draw () {
  Nostroke ();
  remplir (245, 10);
  rect (0, 0, largeur, hauteur);
  aucun remplissage();
  Var Yoff = 0;

14. Créer un effet de flux

Pour obtenir l'effet de flux, il y a deux "pour" boucles en mouvement dans les lignes et les colonnes pour mettre à jour les valeurs de bruit. Celles-ci sont ensuite modifiées en angles de la valeur de bruit prête à mettre à jour les particules pour chacune des positions de l'écran.

 pour (var y = 0; y & lt; rangées; y ++) {
  var xoff = 0;
  pour (var x = 0; x & lt; cols; x ++) {
  Index var = (x + y * cols);
  var angle = bruit (XOFF, YOFF, ZOFF) * Two_PI * 4;
  var v = p5.vector.fromange (angle);

15. Mettez à jour le tableau

Le tableau de flux est mis à jour avec l'angle et les valeurs sont augmentées de manière à ce que le décalage de chaque position soit augmenté chaque fois qu'elle monte. Cela pourrait sembler compliqué, mais cela crée vraiment un mouvement aléatoire fluide pour les particules à suivre à l'écran.

 v.setmag (1);
  flowfield [index] = v;
  XOFF + = INC;
  }
  Yoff + = Inc;
  zoff + = 0,001;
  }

16. Mettez à jour les particules

Maintenant, les particules sont toutes bouclées dans leur matrice. Chaque particule individuelle est invitée à suivre le champ d'écoulement, à mettre à jour, à vérifier les bords de l'écran, à la dispersion légèrement et finalement être dessiné à l'écran à l'aide de la fonction Afficher. Enregistrez le fichier et testez l'index.html »pour que les particules se déplacent.

 pour (var i = 0; i & lt; particules.length; i ++) {
  particules [i] .Suivre (Flowfield);
  particules [i] .update ();
  particules [i] .edges ();
  particules [i] .catter ();
  particules [i] .show ();
  }
}

17. Ajouter le texte

Le texte est un masque placé sur le dessus. Pour ce faire, l'image correcte est placée sur le dessus des particules. Ajoutez ce code avant la corde de fermeture de la fonction de tirage. Enregistrez et vérifiez le navigateur pour voir l'effet qui fonctionne avec le texte maintenant.

 Image (IMG, 0, 0);

18. Détecter la position de la souris

La position de la souris est référencée et les valeurs X et Y sont mappées sur des angles de degré pouvant être déplacés. Sur l'axe Y, il sera de -25 à 25 et inversement pour l'axe X. Le code restant doit être placé après l'ajout du dernier code, avant la fin de la fonction de tirage.

 Targety = Math.Round (carte (Mousex, 0, largeur, -25, 25));
ciblex = maths.round (carte (Mousey, 0, Hauteur, 25, -25));

19. Facilité en place

La position cible est maintenant donnée un peu d'assouplissement afin que les degrés atteignent lentement leur cible. Ceci est créé à l'aide d'un algorithme d'assouplissement classique de la mise hors tension de la position actuelle de la destination et de la multiplication par un nombre bas.

 var vx = (ciblex - currex) * 0,05;
Var VY = (Targety - Curry) * 0,05;
CalcX + = VX;
Calcy + = VY;

20. Ecrivez le CSS

La variable 'T' ici prend les valeurs calculées et les place dans une chaîne CSS à l'aide des valeurs de transformation de rotatex et de rotation. La position actuelle est calculée à partir de la position de la toile actuellement pivotée.

 T = 'ROTATEX (' + CalcX + 'Deg) Totation de la rotation (' + Calcy + 'Deg)';
Currx = CalcX;
Curry = Calcul;

21. Terminer

Maintenant, le CSS est appliqué à l'élément de toile de ce code. Enregistrez la page et aperçu cela dans le navigateur. Maintenant, la souris met complètement à jour la rotation de la toile afin qu'elle se déplace lorsque la souris se déplace. Bien sûr, toutes les particules de cet espace se déplacent avec elle sur l'écran.

 canvas.style.webkittransform = t;
canvas.style.mstransform = t;
canvas.style.transform = t;

Cet article a été publié à l'origine dans Creative Web Design Magazine Web Designer. Acheter numéro 271 ou s'abonner .

Articles Liés:

70 meilleures polices libres pour les designers
6 étapes de l'expérience de lecture en ligne parfaite
L'outil en ligne gratuit vous montre ce que vos polices peuvent faire

[dix] [dix]

[dix]

Faites des effets de typographie 3D interactifs

01. Démarrer le processus

02. Mettez à jour la particule

03. Allez avec le flux

04. Suivre mais pas trop étroitement

05. Afficher la particule

06. Envelopper

07. Le délice d'emballage

08. faire de nombreuses particules

09. Définir tout

10. Autres écrans

11. faire une grille

12. faire des particules

13. Dessinez l'écran

14. Créer un effet de flux

15. Mettez à jour le tableau

16. Mettez à jour les particules

17. Ajouter le texte

18. Détecter la position de la souris

19. Facilité en place

20. Ecrivez le CSS

21. Terminer

Comment - Most Popular Articles

Jump Début Réagissez Natif avec Expo

Comment concevoir la typographie isométrique

10 conseils pour la modélisation de surface dure

Comment faire de votre propre caractère biblique

4 Conseils d'optimisation des images essentielles

Comment créer une lampe de lava avec Keyshot

Comment se déplacer entre Daz Studio et Cinema 4D

Texture un droid K-2SO porté authentique

Catégories