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.

20 dessins de paquets ridiculement créatifs que vous devez voir

20 dessins de paquets ridiculement créatifs que vous devez voir

Lorsque vous faites vos courses au supermarché, il est probable que vous achèterez probablement des articles dont vous n'avez pas nécessairement besoin. Parfois, ce qui vous attire n'est pas le produit lui-même, mais la façon dont il vous est présenté . Les commerçants peuvent dépenser des tonnes d'argent sur des campagnes de publicité ou d'énormes panneaux d'affichage, mais rien ne fonctionne mieux qu'un emballage intelligent.Pour attir

(Conseils techniques et de conception)

Les add-ons arrivent à Gmail en 2017

Les add-ons arrivent à Gmail en 2017

Gmail est sur le point d'être beaucoup plus flexible, car Google a annoncé que des «modules complémentaires» seront déployés dans le service de messagerie d'ici la fin de l'année.Actuellement disponible sous la forme d'un aperçu de développeur, Google affirme que ces «modules complémentaires» seront construits dans les scripts d'applications en utilisant un nouveau système de «carte» qui permet aux développeurs de combiner différents composants de l'interface utilisateur. En plus de cela,

(Conseils techniques et de conception)