Créer un effet de texte Wobbly avec JavaScript

Sep 14, 2025

Comment

A screenshot from Patrick Heng's website including moving typography

[dix] [dix] [dix]

[dix]

L'introduction d'effets sur le texte et la typographie peuvent ajouter une nouvelle perspective à la expérience utilisateur sur un site web. Mais le texte doit être lu et devenir trop intelligent ou intelligent avec un effet peut vaincre le but de celui-ci.

[dix]

Alors soyez intelligent, soyez intelligent, mais assurez-vous que votre typographie cinétique effet fonctionne réellement, tout comme ça Le site de Patrick Heng - En vedette dans l'image ci-dessus. Lisez sur pour savoir comment ...

1. Créez le texte de l'intro

Ouvrir le fichiers de projet Et vous verrez qu'il y a la bibliothèque Velocity.js et Blast.js. L'explosion divise le texte, tandis que la vitesse est un moteur Tween. Il existe trois variables décalées pour que chaque morceau de texte se déplace à différents intervalles.

 & lt; script & gt;
Var offset1 = 0;
Var offset2 = 0;
Var offset3 = 0;
& lt; / script & gt;

2. Diviser le texte

Utilisation de Blast, chacun des caractères de texte est divisé en son propre élément span. Ensuite, la couche supérieure du texte est bouclée et le décalage est augmenté pour chaque lettre afin d'animer de manière indépendante.

 $ ("H1"). Blast ({
  Délimiteur: "caractère"
});
Fonction Anim () {
  var $ allure = $ ("# top"). Trouver ('Span');
  $ spans.ach (fonction () {
  offset1 + = 40;

3. Ajout de la vélocité

Maintenant, la bibliothèque de vélocité ajoute le mouvement et l'opacité afin que les lettres se déplacent et s'effacent. Chaque lettre est décalée et la durée et l'assouplissement sont définis pour chacune des lettres.

[dix]

 $ (this) .velocity ({
  Traduction: -100,
  opacité: 1
  }, {
  Délai: offset1,
  Durée: 800,
  Easting: "FaibleOutOut"
  });
  });
}

[dix]

4. Appelez l'action

Maintenant, la fonction 'Anim' est appelée et cela déclenche l'animation pour commencer. Une fonction 'Settimeout' Start désormais le deuxième bloc de texte qui sera jaune. Encore une fois, il est déclenché en utilisant la vitesse comme dans le premier exemple.

 Anim ();
SettimeOut (fonction () {
  var $ allure = $ ("# milieu"). Trouver ('Span');
  $ spans.ach (fonction () {
  offset2 + = 40;
  $ (this) .velocity ({
  Traduction: -100,
  opacité: 0.8
  }, {

5. Passer sur

Le délai, la durée et l'assouplissement sont définis de manière à ce que le deuxième texte jaune se déplace correctement. Ensuite, le dernier texte qui est orange est contrôlé dans la fonction suivante «Settimeout» pour retarder ce déplacement un peu plus longtemps avant de commencer.

 Délai: Offset2,
  Durée: 800,
  Easting: "FaibleOutOut"
  });
  });
}, 100);
SettimeOut (fonction () {
  var $ couvre = $ ("# bas"). Trouver ('Span');

6. Ajouter des lettres finales

Maintenant, les dernières lettres sont déplacées en place. Cela donne le même effet que Le site de Patrick Heng , qui a des couches de texte en mouvement. Patrick utilise en fait WebGL pour déplacer le texte, mais c'est un moyen plus simple avec des éléments DOM.

 $ spans.ache (fonction () {
  offset3 + = 40;
  $ (this) .velocity ({
  Traduction: -100,
  opacité: 0.8
  }, {
  Délai: offset3,
  Durée: 800,
  Easting: "FaibleOutOut"
  });
  });
}, 150);

En savoir plus à Generate London

Generate graphic — Voir Richard Rutter, Sarah Parmmenter et Bruce Lawson, et plus parler de Generate London 2018

Richard Rutter a un amour et une fascination pour la typographie et co-fondée Fondue , un service de police Web pionnier. En tant qu'évangéliste de typographie Web auto-nommée, Richard est l'organisateur en chef de Clearleft Ampersand Typographie Web Conférences.

Lors de la génération de Londres 2018, son atelier vous aidera à créer des sites Web avec une typographie Web engageante, appropriée, distinctive, expressif et lisible, qui s'adapte aux écrans de toutes formes et de toutes tailles. Vous apprendrez à combiner des cravates anciens avec une technologie de pointe - y compris des polices variables - afin de concevoir et de développer les meilleures expériences de vos lecteurs.

Au cours d'une journée, vous participerez à des activités pratiques, en appliquant chaque nouvelle technique sur un exemple détaillé sur lequel vous pouvez vous ramener avec vous. Cela constituera la ressource parfaite pour vous de faire référence à l'avenir. Et si cela ne suffit pas, chaque participant va marcher avec une copie électronique gratuite de la renommée de Richard Livre de typographie Web .

Ne manquez pas, obtenez votre billet maintenant

Articles Liés:

Parfait JavaScript dans 1 000 projets
Conseils de type numérique Pro pour les concepteurs graphiques
7 ressources de type web

[dix] [dix]

[dix]

Créer un effet de texte Wobbly avec JavaScript

1. Créez le texte de l'intro

2. Diviser le texte

3. Ajout de la vélocité

4. Appelez l'action

5. Passer sur

6. Ajouter des lettres finales

En savoir plus à Generate London

Comment - Most Popular Articles

Dessine le pouvoir de contraste dans l'art

Tutoriel Procrété: Comment peindre comme les anciens maîtres

Créer des finitions d'impression spéciales dans InDesign

Construisez une page d'atterrissage par scission animée

Comment faire de délicieuses textures avec des crayons

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

Texture un droid K-2SO porté authentique

Le Guide de la création de textures 3D

Catégories