Créer des widgets entièrement animés avec Shift.css

Animation Web offre un moyen de attirer l'attention des gens et les attirer plus loin dans un site web. Il existe de nombreux outils pour créer des animations gratuites mais Shift.css est l'un des plus récents dans le peloton.

C'est un framework open source gratuit fait pour créer animations dynamiques dans n'importe quel conteneur. Et ces animations ne sont pas enfermés dans une séquence. Vous pouvez réellement créer des animations personnalisées pour chaque élément dans le bloc et appliquer ces dans un certain ordre.

le Shift page de démonstration peut vous montrer beaucoup mieux que je peux expliquer en mots.

Une chose que vous remarquerez est que chaque élément à l'intérieur du conteneur est un élément HTML séparé. Que ce soit un fichier SVG, une image ou autre, vous pouvez tout animer séparément créez votre propre effet d'animation personnalisé.

La bibliothèque est livrée avec deux fichiers, un .css et .js bibliothèque, et les deux doivent être ajouté à la tête de votre document.

Je ne trouve pas de rapport GitHub pour ce projet, vous devrez donc télécharger les fichiers directement depuis le site Shift.css.

La prochaine étape consiste à définir un élément conteneur avec quelques contenus. Les noms de classe sont importants, ainsi chaque élément d’animation doit avoir la classe .élément de décalage appliqué.

Parallèlement à ces cours, vous pouvez également ajouter des attributs de données HTML5 pour définir le fonctionnement de l'animation. Pour l'instant, il n'y en a que trois, mais ils devraient suffire pour personnaliser un effet d'animation complet..

1. animation de données: Nom de l'animation
2. délai de transmission de données: Délai total (en secondes) avant le début de l'animation
3. durée des données: Longueur totale (en secondes) de l'animation

Le nom de l'animation doit être un animation prédéfinie créé pour la bibliothèque Shift. En ce moment il y a 15 noms d'animation à choisir. Vous pouvez les voir énumérés au bas de la page d'accueil Shift.css.

Juste copier coller tout ce que vous voulez dans le réglage du nom de l'animation et vous devriez être prêt à partir! Par exemple, si je voulais utiliser l'animation de fondu de sortie, j'ajouterais data-animation = "shift_exitFade" comme un attribut de données à n'importe quel élément devrait animer de cette façon. Peasy facile.

J'aimerais que cette bibliothèque propose plus d'options en JavaScript, car cela permettrait aux développeurs de contrôler beaucoup plus l'emplacement et les fonctionnalités. Mais pour un framework d'animation simple (et gratuit), je ne peux pas me plaindre.

Shift.css est parfait pour nouveaux développeurs qui veulent créer styles d'animation plus complexes sans écrire du code prolixe à partir de zéro.