hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Animez facilement du texte avec Textillate.js

Dans notre article précédent, nous vous présentons Animate.css, une superbe bibliothèque CSS3, qui facilite la création d'animations CSS3. Dans ce post, nous allons vous présenter un plugin jQuery, construit en utilisant Animate.css, qui est capable d'animer du texte, appelé Textillate.js .

Bien que vous puissiez animer du texte avec Animate.css, il est uniquement animé entièrement, pas lettre par lettre . Même si vous avez une approche consistant à emballer chaque personnage dans un élément et à les animer, cela va être gênant et inefficace. Avec ce plugin, vous pouvez animer chaque lettre de votre texte facilement.

Textillate.js divise l'animation en 2 composants, l' animation in et out . Vous pouvez les appliquer avec différentes animations, séparément. Tous les effets d'animation utilisent les effets de la bibliothèque Animate.css.

Outre Animate.css, Textillate.js est également construit sur la base de Lettering.js. On peut dire, ce plugin est la combinaison de ces 2 puissants outils. Animate.css fonctionne sur la fonctionnalité d'animation, tandis que Lettering.js se concentre sur la typographie .

Usage

Textillate.js a besoin de quelques dépendances avant de pouvoir être utilisé. Ils sont Animate.css, Lettering.js et jQuery. Après avoir téléchargé les fichiers, incluez-les dans votre projet, comme ceci.

Et n'oubliez pas de mettre la bibliothèque Animate.css dans la section head.

Balisage de base

Pour commencer à utiliser Textillate.js, vous devez définir une classe d'éléments que vous souhaitez animer, puis y ajouter l'effet que vous avez choisi . Veuillez noter que ce plugin ne fonctionne que sur du texte contenant des éléments, donc tout élément qui n'est pas du texte ne sera pas animé.

A titre d'exemple, nous avons un élément qui contient du texte ici, et une classe de demo, comme ça.

Chacune de cette lettre va animer.

Nous appelons le nom de classe avec l'initialisation Textillate.js, comme ça.

Le texte va maintenant animer.

Options de Textillate.js

Le code Javascript précédent appliquera uniquement le paramètre d'animation par défaut au texte. Pour le changer, il y a deux méthodes que vous pouvez utiliser.

1. D'abord, en entrant des données HTML api comme suit.

Chacune de cette lettre va animer.

data-in-effect définissent l'effet d'entrée du texte. Tandis que pour l'effet de sortie, vous pouvez utiliser data-out-effect API api de données.

2. Vous pouvez également ajouter les options dans l'initialisation Javascript Textillate.js comme le code suivant.

En plus de l' effect, il existe d'autres options utiles que vous souhaitez utiliser. Pour voir la liste complète des autres options, rendez-vous sur la page de documentation.

Pensée finale

Textillate.js est un plugin très utile surtout lorsque vous voulez attirer les utilisateurs vers le texte que vous voulez mettre en valeur le plus. Il peut s'agir de l'en-tête de votre site, des services, des mises à jour, de la promotion ou de toute autre chose. Et pour plus d'améliorations, vous pouvez combiner Textillate.js avec un autre plugin comme FitText.js désigné pour le texte d'affichage gigantesque. Encore une fois, n'oubliez pas d'utiliser l'animation dans les bonnes quantités.

20 Polices Gratuites pour les Modèles Minimalistes

20 Polices Gratuites pour les Modèles Minimalistes

Les nouveaux projets nécessitent de nouvelles polices, non? Il y a beaucoup de polices gratuites qui sont très populaires et que l'on peut voir presque partout sur le web, par exemple, dans de nouveaux modèles de sites Web, des bannières, des dépliants, etc. Si vous commencez à voir Open Sans, Bebas, Raleway et Exo utilisés dans presque tous les projets graphiques qui apparaissent ces jours-ci, il est temps de vous démarquer du reste avec de nouveaux choix de polices.Voici 2

(Conseils techniques et de conception)

Philter.js - Bibliothèque d'altération d'image gratuite à l'aide de filtres CSS

Philter.js - Bibliothèque d'altération d'image gratuite à l'aide de filtres CSS

Instagram est largement connu comme le réseau photo le plus populaire. Il traite plus de 52 millions de photos par jour et nombre d'entre elles comprennent des filtres qui modifient les images à la volée.Ceci est également possible en utilisant des filtres CSS qui s'appliquent directement dans le navigateur . Ce

(Conseils techniques et de conception)