Tuesday.css est la bibliothèque d'animation la plus chaude en ce moment
A présent, vous devriez déjà être familiarisé avec Animate.css comme la bibliothèque d'animation principale parmi les concepteurs de sites Web.
Mais il y a un nouveau gamin sur le bloc nommé Mardi, et son prendre de force l'animation web.
Cette nouvelle bibliothèque n’est pas très différente en termes de format ou d’implémentation. Mais mardi vient avec une poignée de nouvelles animations CSS que vous ne trouve nulle part ailleurs.
Ces nouveaux effets sont beaucoup plus subtile dans la nature alors ils ont vraiment se fondre bien dans une page. Voici un petite liste des effets vous pouvez choisir parmi:
- Fondu et élargir
- Fondu et rétrécissement
- Estamper et rebondir
- Balançoire inclinée
- Drop in de gauche / droite
- Squash / stretch
- Charnière
Si vous parcourez cette liste sur la page de démonstration, vous remarquerez que tous les effets ont une chose en commun: la physique.
Ils se sentent tous très réaliste aux bases de la physique, et ils semblent respecter les lois de la gravité. Aucune de ces animations n'est excessive ou superflue. Ils sont subtile mais perceptible et plus important encore, ils sont croyable.
Je pense que mardi est l’une des meilleures bibliothèques d’animation CSS modernes car elle présente une vue réaliste de l'animation web.
Nous ne devrions pas concevoir d’effets d’interface loufoques qui se détachent comme un pouce endolori. Subtilité est toujours le nom du jeu parce qu'il crée un sentiment d'interactivité de toute entrée utilisateur, que ce soit un clic ou un parchemin.
Le problème a toujours été d’écrire ces animations à partir de zéro et de les rendre parfaites. Mais maintenant avec mardi vos soucis peuvent voler dès la porte.
Juste télécharger une copie de GitHub et ajouter le .css déposer sur votre page. Vous pouvez réellement utiliser la version CDN directement de GitHub si vous ne voulez rien télécharger localement.
Une fois que cela est ajouté à votre page Web, il suffit de annexer le .animer classe avec l'une des classes propriétaires listés dans le repo GitHub. Votre code pourrait ressembler à quelque chose comme ça:
C'est mardi.
Regardez le documentation complète à voir une liste de toutes les classes d'animation in / out.
Si vous travaillez avec JavaScript, vous pouvez aussi ajouter ces classes dynamiquement sur les événements de clic / survol. De cette façon, vous pouvez ajouter la classe animate uniquement lorsqu'un utilisateur clique sur un bouton qui semblera s'animer au clic..
Il y a tellement de choses que vous pouvez faire avec mardi, et c'est vraiment le nouveau Animate.css pour des animations d'interface utilisateur pragmatiques.
Jetez un coup d'oeil au page de démonstration pour le voir vivre en action, et vous pouvez en apprendre davantage en lisant leur “dans la fabrication” poster qui parle de la façon dont l'équipe de Shakr a créé mardi.
