Animer du texte avec Blast.js

Animer les éléments HTML à l'aide de CSS ou JavaScript est plus ou moins une tâche facile de nos jours, grâce à l'aide des bibliothèques. Cependant, vous ne pouvez qu'animation des éléments existants complets.

Cela signifie que si vous souhaitez animer un seul mot dans un paragraphe, vous devez envelopper le mot en un seul élément (comme une travée), puis le localiser en conséquence.

Si vous n'avez qu'un ou deux éléments de portée comme celui-ci, ce n'est pas un gros problème, mais que se passe-t-il si vous voulez animer chaque personnage d'un paragraphe? Pour chaque personnage, vous devez créer une portée, ce qui ajoute beaucoup de balisage supplémentaire et rend le texte difficile à modifier. C'est pourquoi Blast.js existe.

points clés

• Blast.js est un plugin jQuery qui permet d'animer des personnages, des mots ou des phrases uniques en HTML. Il le fait en enroulant le texte sélectionné dans un seul élément (comme une portée), puis en animations ces éléments.
• Le plugin offre de nombreuses options de personnalisation, y compris la possibilité de sélectionner des éléments d'enveloppement, de rechercher et de mettre en évidence des mots ou des phrases spécifiques, et de contrôler la vitesse et le style d'animations. Il garantit également que les éléments existants du texte ne sont pas supprimés ou corrompus.
• Bien que Blast.js soit puissant, tous les utilisateurs n'en ont pas besoin, en particulier ceux qui n'ont pas besoin de texte animé. Cependant, pour ceux qui ont besoin de texte animé, il peut être un outil puissant pour ajouter des éléments dynamiques et interactifs aux pages Web.

Qu'est-ce que Blast.js?

Blast.js est un plugin jQuery qui vous permet d'animer des personnages, des mots ou des phrases individuels. Dans cet article, je vais fournir quelques exemples afin que vous puissiez comprendre comment utiliser Blast.js. Pour utiliser Blast.js et essayer l'exemple suivant, vous avez besoin de jQuery ainsi que du fichier BLAST.js, qui se trouve sur le site Web du projet de Blast.js.

Comme mentionné précédemment, Blast.js nous permet de créer des éléments autour des caractères, des mots ou des phrases, mais la bibliothèque ne se limite pas à ces options. Dans la section suivante, nous verrons quelques exemples spécifiques pour introduire certaines options. La liste des options que nous verrons n'est pas exhaustive; une liste complète des options disponibles peut être trouvée sur le site Web du projet.

Animer notre premier texte

Dans ce premier exemple, nous animerons un titre, les déplaçant vers le bon caractère par personnage. Le seul code HTML requis est le suivant:

<h1 id="gt">></h1>Hello World!>

Après avoir inclus jQuery et Blast.js, le prochain morceau de code de cette section sera tout dans un fichier JavaScript personnalisé dans le gestionnaire Ready de JQuery pour s'assurer que la page est prête:

$(function() {
  // 动画代码
});

Maintenant, nous pouvons animer notre titre. Dans notre exemple, l'utilisation de $ ('h1') pour localiser l'élément serait suffisant, mais dans votre cas, vous utiliseriez n'importe quel sélecteur approprié pour localiser l'élément.

Blast.js fournit une nouvelle méthode sur l'objet jQuery: .Blast (), qui accepte un paramètre: un objet qui répertorie toutes les options que vous souhaitez utiliser. Dans ce premier exemple, nous n'utiliserons qu'une seule option Delimiter: «personnage», indiquant que nous voulons animer notre titre de titre par personnage.

Si nous n'incluons pas le paramètre, le «mot» de valeur par défaut (plutôt que le «caractère» sera utilisé, il sera donc créé autour de chaque mot (pas tous les personnages, comme nous le voulons ici) une portée.

<h1 id="gt">></h1>Hello World!>

De cette façon, notre élément H1 simple sera animé et le DOM suivant sera généré:

$(function() {
  // 动画代码
});

Notez que les espaces entre les mots ont été préservés et ne sont pas encapsulés dans la portée.

Maintenant, nous devons récupérer l'élément de portée généré. Par exemple, vous pouvez essayer $ ('. Blast'), mais il existe un moyen plus facile. Par défaut, la méthode .blast () renvoie les éléments générés, vous n'avez donc qu'à les stocker dans une variable pour récupérer ces éléments.

$('h1').blast({
  delimiter: 'character'
});

Il est utile d'obtenir les éléments générés, mais pas toujours. Donc, si vous voulez que la méthode .blast () renvoie l'élément parent (l'élément principal que vous animez) au lieu de l'élément généré, vous pouvez utiliser une autre option: Retournenerated. Par défaut, il est défini sur true;

<h1 id="class-blast-root-gt"> class="blast-root"></h1>
   class="blast">H>
   class="blast">e>
   class="blast">l>
   class="blast">l>
   class="blast">o>

   class="blast">W>
   class="blast">o>
   class="blast">r>
   class="blast">l>
   class="blast">d>
   class="blast">!>
>

Revenons à notre exemple pour animer les éléments que nous collectons. Nous utiliserons la méthode .each () de jQuery pour animer chaque personnage de personnage par personnage.

La méthode

.each () exécutera une fonction pour chaque élément stocké dans l'objet jQuery. Voici les fonctions que nous utiliserons, expliquées dans les commentaires.

var chars = $('h1').blast({
  delimiter: 'character'
});

Code Explication: Tout d'abord, nous utilisons $ (ceci) pour récupérer l'élément actuel (dans ce cas, le caractère actuel). Nous initialisons sa position relative à zéro, et enfin, nous animons cette position.

Comme indiqué dans les commentaires correspondants dans le code, la méthode .delay () démarre l'animation après le nombre défini de millisecondes, en utilisant i * 45, où i est le compteur fourni par jQuery (nous le passons sous forme de paramètre) . Pour le premier personnage, je suis égal à 0, donc l'animation démarre immédiatement, puis elle équivaut à 1, le deuxième personnage est animé après 45 millisecondes, etc.

Notre animation est prête et peut être exécutée! Vous pouvez le voir dans l'exemple en direct ci-dessous.

Sélectionnez votre élément d'emballage

Par défaut, un élément Span est créé, ce qui est généralement ce que nous voulons. Mais parfois, nous voulons utiliser d'autres éléments tels que Strong, EM et même Div et P. Avec Blast.js, cela est possible.

Pour ce faire, dans notre prochain exemple, nous créerons un paragraphe où chaque mot sera stylé avec des couleurs aléatoires et encapsulé dans l'élément EM.

Tout d'abord, nous avons besoin d'une fonction pour nous fournir un nombre aléatoire. Nous utiliserons la version modifiée de math.random () qui est disponible en JavaScript natif.

var chars = $('h1').blast({
  delimiter: 'character',
  returnGenerated: false
});

Cette nouvelle fonction nous donnera des entiers aléatoires entre Min et Max, qui sont passés comme arguments dans la fonction.

Maintenant, nous sommes prêts à colorer nos paragraphes. Tout d'abord, nous utilisons le «mot» Delimiter pour animer nos paragraphes. Nous avons ajouté une nouvelle option: TAG, qui nous permet d'indiquer les balises que nous voulons utiliser Blast.js pour générer des éléments. Nous le définissons sur «EM» au lieu de la portée par défaut ».

<h1 id="gt">></h1>Hello World!>

Maintenant, tous nos mots sont encapsulés dans la balise EM. Pour chaque balise, nous utilisons la méthode .css () de jQuery et notre fonction Rand () personnalisée pour définir une nouvelle couleur:

$(function() {
  // 动画代码
});

Ensuite, nous ajouterons une autre ligne de code pour expliquer comment récupérer l'état initial de l'élément parent (c'est-à-dire comment supprimer toutes ces balises générées supplémentaires).

Pour ce faire, vous pouvez attribuer une fausse valeur à la méthode .blast (). Cela indique à Blast.js que toutes les balises ajoutées par les appels précédents à l'aide de cette méthode seront supprimées.

Vous pouvez voir cet exemple dans la version en direct ci-dessous. Essayez de taper l'un des mots existants affichés sur la page pour voir l'effet.

Recherche avec Blast.js

Par défaut, Blast.js crée des éléments autour de chaque mot, caractère ou phrase du texte. Mais vous pouvez également localiser un seul mot ou un groupe de mots: blast.js, puis encapsuler chaque apparence du mot ou de la phrase en un élément. Pour ce faire, nous utiliserons l'option de recherche, dont la valeur est une chaîne, pas l'option Delimiter.

Pour la démonstration, nous créerons un formulaire avec des boutons d'entrée et de soumission. L'utilisateur indiquera le mot dans l'entrée à rechercher dans un paragraphe spécifique, puis Blast.js résumera les termes recherchés dans l'élément de portée.

$('h1').blast({
  delimiter: 'character'
});

Nous le ferons en utilisant l'événement de soumission sur le formulaire.

<h1 id="class-blast-root-gt"> class="blast-root"></h1>
   class="blast">H>
   class="blast">e>
   class="blast">l>
   class="blast">l>
   class="blast">o>

   class="blast">W>
   class="blast">o>
   class="blast">r>
   class="blast">l>
   class="blast">d>
   class="blast">!>
>

La directive

e.PreventDefault ();

Nous utilisons le sélecteur correct pour récupérer nos paragraphes avant d'appliquer la méthode .blast () avec la fausse valeur pour la première fois. De cette façon, si l'utilisateur a déjà effectué d'autres recherches, ces recherches seront effacées.

Ensuite, nous utilisons à nouveau la méthode .blast (), cette fois le terme requis pour la recherche. Pour ce faire, nous utilisons l'option de recherche pour lui fournir la valeur d'entrée. Les deux autres options ne sont pas obligatoires, mais j'espère vous montrer leur existence.

L'option

CustomClass nous permet d'ajouter nos propres noms de classe aux éléments générés. Si vous avez regardé les éléments générés dans l'exemple précédent, vous verrez certainement qu'ils ont tous la classe BLAST. À l'aide de CustomClass, vous pouvez ajouter une ou plusieurs classes.

L'option

GenerateIndexid est une valeur booléenne. Défini sur true, il ajoutera un ID à chaque élément généré. Pour fonctionner, il nécessite l'option CustomClass. Ici, nous choisissons la recherche de classe, de sorte que le premier élément généré aura une recherche d'ID, le deuxième élément aura la recherche-2, etc.

Pour rendre notre exemple utile, nous devons ajouter des règles dans CSS pour mettre en évidence les éléments générés. Par exemple, vous pouvez appliquer les règles suivantes.

var chars = $('h1').blast({
  delimiter: 'character'
});

Vous pouvez voir cet exemple dans la version en direct ci-dessous. Essayez de taper l'un des mots existants affichés sur la page pour voir l'effet.

Qu'en est-il des éléments existants?

Après avoir compris comment fonctionne Blast.js, il y a maintenant une question importante à répondre. Puisque nous appliquons la méthode .blast () au conteneur, que se passe-t-il si ce conteneur contient d'autres éléments en plus du nœud de texte? Par exemple, que se passe-t-il si nous avons appliqué l'explosion au paragraphe suivant?

<h1 id="gt">></h1>Hello World!>

Blast.js ne détruira pas votre arbre Dom. Dans ce cas, l'élément de portée existant n'est pas supprimé et un nouvel élément de portée (avec la classe BLAST) est créé. En exécutant $ ('p'). Blast () sur le paragraphe ci-dessus, nous générerons le résultat suivant:

$(function() {
  // 动画代码
});

Last: Et si cet élément Span existant est en fait un élément de portée généré par Blast.js? La réponse dépend de ce que vous voulez faire.

Supposons que nous appliquons la méthode .blast () à un paragraphe et définissons l'option Delimiter sur «Word», si nous appliquons à nouveau la même méthode, l'élément généré précédemment sera supprimé avant de créer un nouvel élément, même si le même est vrai pour les nouveaux appels à utiliser la recherche au lieu des séparateurs.

Cependant, si vous recherchez un terme et appelez à nouveau la méthode .blast () pour rechercher un nouveau terme, l'ancienne recherche ne sera pas supprimée. Dans le dernier exemple de notre section précédente, essayez de supprimer l'appel .blast (faux). Dans ce cas, la nouvelle recherche sera mise en évidence, mais l'ancienne recherche restera également mise en évidence.

de toute façon

BLAST.js n'est pas utile à tout le monde, et certains peuvent penser que c'est complètement inutile. Cependant, si vous souhaitez animer du texte, c'est probablement l'une des meilleures options que vous puissiez trouver.

Comme mentionné ci-dessus, vous pouvez trouver d'autres options pour personnaliser les éléments générés. Vous pouvez même choisir de désactiver la propriété Aria.

Si vous avez des idées sur la façon de l'utiliser de manière créative, ou si vous avez utilisé ceci ou d'autres outils pour animer le texte, n'hésitez pas à nous le faire savoir dans la discussion.

FAQ (FAQ) sur l'animation du texte en utilisant Blast.js

Comment installer Blast.js dans mon projet?

Pour installer Blast.js dans votre projet, vous pouvez utiliser NPM ou Bower. Si vous utilisez NPM, vous pouvez l'installer en exécutant la commande NPM Installer Blast-Text. Si vous utilisez Bower, la commande est Bower Installer Blast-Text. Après l'installation, vous pouvez utiliser la balise de script pour l'inclure dans votre fichier HTML. N'oubliez pas d'inclure jQuery avant Blast.js car il s'agit d'un plugin jQuery.

Quels sont les différents séparateurs dans Blast.js?

Blast.js fournit quatre délimiteurs différents: caractère, mot, phrase et élément. Le séparateur de caractère divise le texte en un seul caractère. Le mot séparateur divise le texte en mots. Le séparateur de phrase divise le texte en phrases. Le séparateur d'éléments casse le texte en éléments HTML.

Comment utiliser Blast.js pour animer le texte?

Pour utiliser Blast.js pour animer le texte, vous devez d'abord utiliser jQuery pour sélectionner le texte à animer. Vous pouvez ensuite utiliser la méthode .blast () pour diviser le texte en fragments. Après cela, vous pouvez utiliser CSS ou JQuery pour animer ces clips.

Puis-je utiliser Blast.js sans jQuery?

Non, Blast.js est un plugin jQuery, donc il nécessite que jQuery fonctionne. Vous devez inclure JQuery dans votre projet avant d'inclure Blast.js.

Comment utiliser les délimiteurs personnalisés dans Blast.js?

Pour utiliser un délimiteur personnalisé dans Blast.js, vous pouvez transmettre une expression régulière à la méthode .blast (). L'expression régulière doit correspondre aux caractères que vous souhaitez utiliser comme séparateur.

Pourquoi mon animation Blast.js ne fonctionne-t-elle pas?

Si votre animation BLast.js ne fonctionne pas, il peut y avoir plusieurs raisons. Tout d'abord, assurez-vous d'inclure jQuery et Blast.js dans votre projet. Deuxièmement, vérifiez si vous utilisez correctement la méthode .blast (). Troisièmement, vérifiez si votre code d'animation CSS ou JQuery est correct.

Puis-je utiliser Blast.js pour animer les éléments HTML?

Oui, vous pouvez utiliser Blast.js pour animer les éléments HTML. Vous pouvez utiliser le séparateur d'éléments pour décomposer HTML en éléments individuels, puis utiliser CSS ou JQuery pour les animer.

Comment contrôler la vitesse de l'animation Blast.js?

La vitesse de l'animation Blast.js est contrôlée par CSS ou JQuery Animation Code, et non par Blast.js lui-même. Vous pouvez ajuster la vitesse en modifiant le paramètre de durée dans le code d'animation.

Puis-je utiliser Blast.js avec d'autres bibliothèques JavaScript?

Oui, vous pouvez utiliser Blast.js avec d'autres bibliothèques JavaScript. Cependant, puisque Blast.js est un plugin jQuery, vous devez inclure jQuery dans votre projet.

Comment supprimer l'effet Blast.js de mon texte?

Pour supprimer l'effet BLAST.js de votre texte, vous pouvez utiliser la méthode .unblast (). Cette méthode restaure le texte à son état d'origine, en supprimant tous les effets BLAST.js.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!