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


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

L'animation Web offre un moyen d' attirer l'attention des gens et de les attirer vers un site Web. Il y a beaucoup d'outils pour créer des animations gratuites, mais Shift.css est l'un des plus récents du groupe.

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

La page de démo de Shift 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 SVG ou une image ou autre, vous pouvez tout animer séparément pour créer votre propre effet d'animation personnalisé .

La bibliothèque est fournie avec deux fichiers, une bibliothèque .css et .js, et tous deux doivent être ajoutés à votre tête de document .

Je ne trouve aucun dépôt GitHub pour ce projet, vous devrez donc télécharger les fichiers directement depuis le site Web Shift.css.

L'étape suivante consiste à définir un élément conteneur avec certains contenus. Les noms de classe sont importants, donc chaque élément d'animation doit avoir la classe .shift-element appliquée .

En plus de ces classes, vous pouvez également ajouter des attributs de données HTML5 pour définir le fonctionnement de l'animation. À l'heure actuelle, il n'y en a que trois, mais ils devraient suffire à personnaliser un effet d'animation complet.

  1. data-animation : Nom de l'animation
  2. data-delay : Délai total (en secondes) avant le début de l'animation
  3. data-duration : Longueur totale (en secondes) de l'animation

Le nom de l'animation doit être une animation prédéfinie créée pour la bibliothèque Shift. À l'heure actuelle, il y a 15 noms d'animation à choisir . Vous pouvez les voir en bas de la page d'accueil de Shift.css.

Il suffit de copier / coller 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" tant qu'attribut de données à tout élément qui devrait s'animer de cette façon. Peasy facile.

Je souhaite que cette bibliothèque soit livrée avec plus d'options en JavaScript car cela permettrait aux développeurs d'avoir plus de contrôle sur l'emplacement et les fonctionnalités. Mais pour un cadre d'animation simple (et gratuit) je ne peux pas me plaindre.

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

Comparer les sites Web Vitesse de chargement (côte à côte) avec cet outil

Comparer les sites Web Vitesse de chargement (côte à côte) avec cet outil

Ce n'est pas un secret que le temps de chargement d' un site Web est un facteur important dans la convivialité. Cela affecte également les classements Google de votre site, de sorte que la vitesse de votre page vaut vraiment la peine d'être optimisée.S'il y a un concurrent que vous essayez de devancer une mesure, vous pouvez analyser la vitesse de la page . Et

(Conseils techniques et de conception)

Un regard dans: La langue du kit

Un regard dans: La langue du kit

Imaginons que vous construisiez des prototypes pour un site Web avec des fichiers HTML . Vous avez environ 10 pages HTML ou plus, et ces pages partagent certains composants communs tels que l'en-tête, la barre latérale et le pied de page.Maintenant, voici le problème: si vous faites un changement dans ces composants partagés, vous devrez peut-être aussi les changer dans les autres fichiers . C&#

(Conseils techniques et de conception)