Créez facilement des effets en cascade avec CascadeJS

Les animations fantaisie sont à la pelle sur le Web. Ils deviennent plus faciles à créer avec des tonnes d'incroyables bibliothèques d'animation.

Cascade.js est une bibliothèque de plus à ajouter à la liste, et c’est définitivement une bibliothèque unique. Avec Cascade, vous pouvez concevoir des effets d’animation personnalisés à l’aide de lettres en cascade dans le texte ou éléments en cascade dans un conteneur principal.

Cette bibliothèque a pas de dépendances; il fonctionne sur JavaScript classique. Vous pouvez l’installer via npm, Bower ou en télécharger une copie directement à partir de GitHub..

Pour faire fonctionner CascadeJS, vous allez besoin de deux fichiers: un fichier CSS et un fichier JavaScript. Ils sont tous deux emballés avec versions minifiées pour vous économiser quelques Ko sur la taille de la page.

Chaque élément de la cascade est décomposé en plusieurs parties qui animer individuellement à travers éléments. Ceux-ci sont ajouté dynamiquement, vous n'avez donc pas besoin de changer quoi que ce soit dans votre code HTML.

Mais vous aurez besoin de mettre en place le couler() une fonction dans votre fichier, après avoir ciblé l'élément que vous souhaitez animer.

Vous pouvez réellement utiliser jQuery avec cette bibliothèque si vous voulez, mais il est non requis. Donc, si vous préférez sélectionner des éléments avec jQuery, n'hésitez pas à les utiliser.

Voici un extrait de vanille JavaScript depuis la démo du site principal:

Vous pouvez passer le couler() élément avec pas de paramètres, ou tu peux configurez-les tous toi même. Ça prend huit paramètres optionnels pour éditer le style d'animation, le timing, la durée et les classes CSS optionnelles.

CascadeJS a une autre fonction appelée fragment() qui vous permet scinder des lettres (ou des éléments) dans des conteneurs séparés, sans les animer. Vous pouvez utiliser cette fonction pour couleur et restyle du texte sur la page en ciblant chaque lettre dans un mot. Assez cool, droit?

Tout exemples de code sont ouvertement disponibles sur la page principale de la bibliothèque, vous pouvez donc copier / coller et bricoler vous-même. Mais vous trouverez aussi le Documentation sur la page GitHub si vous cherchez un moyen plus clair de commencer.