Paradis Pour Les Concepteurs Et Les Développeurs

Comment créer des animations et des transitions avec Motion UI

Les animations et les transitions permettent aux concepteurs de visualiser le changement et de différencier le contenu. Les animations et les transitions sont des effets mobiles qui aident les utilisateurs à reconnaître quand quelque chose change sur le site, par exemple, ils cliquent sur un bouton et une nouvelle information apparaît sur l'écran. L'ajout de mouvement aux applications et aux sites Web améliore l'expérience utilisateur, car il permet aux utilisateurs de donner un sens au contenu de manière plus intuitive .

Nous pouvons créer des animations et des transitions à partir de rien ou en utilisant des bibliothèques ou des frameworks. Bonne nouvelle pour nous, les gens de l'interface, c'est Zurb, le créateur de la Fondation, en octobre dernier, Motion UI, sa bibliothèque d'animation et de transition basée sur Sass.

À l'origine, il était fourni avec Foundation for Apps, et maintenant, pour la version autonome, il a fait l'objet d'une refonte, y compris un système de file d'attente d'animation et des modèles CSS flexibles . Motion UI alimente également certains composants du framework Foundation, tels que le curseur Orbit, le sélecteur Toggler et le modal Reveal, ce qui en fait un outil assez robuste.

Commencer

Bien que Motion UI soit une bibliothèque Sass, vous n'avez pas forcément besoin de l'utiliser avec Sass, car Zurb fournit aux développeurs un kit de démarrage pratique qui contient uniquement le CSS compilé. Vous pouvez le télécharger à partir de la page d'accueil de Motion UI et commencer rapidement à créer un prototype en utilisant les classes d'animation et de transition CSS prédéfinies.

Le kit de démarrage ne contient pas seulement l'interface utilisateur Motion, mais aussi le framework Foundation, ce qui signifie que vous pouvez utiliser la grille Foundation et toutes les autres fonctionnalités de Foundation for Sites si vous le souhaitez.

Le kit de démarrage est également livré avec un fichier index.html qui vous permet de tester rapidement le framework.

Si vous avez besoin d'ajustements plus sophistiqués et que vous voulez tirer parti des puissants mixass Sass de Motion UI, vous pouvez installer la version complète contenant les fichiers source .scss avec npm ou Bower.

La documentation de Motion UI est encore à moitié cuite. Vous pouvez le trouver ici sur Github, ou y contribuer si vous le souhaitez.

Prototypage rapide

Pour démarrer le prototypage, vous pouvez éditer le fichier index.html du kit de démarrage ou créer votre propre fichier HTML. Vous pouvez créer la mise en page à l'aide de la grille Foundation, mais l'interface utilisateur Motion peut également être utilisée en tant que bibliothèque autonome sans le framework Foundation.

Il existe trois types principaux de classes CSS prédéfinies dans Motion UI:

Transition Classes - permettent d'ajouter des transitions, telles que des effets de glissement, de fondu et d'articulation à un élément HTML.
Classes d'animation - vous permettent d'utiliser différents effets de tremblement, de rotation et de rotation
Classes de modificateur - fonctionnent ensemble avec les classes de transition et d'animation, et vous permettent d'ajuster la vitesse, le timing et le délai d'un mouvement.

Construire le HTML

L'avantage des classes CSS prédéfinies est qu'elles peuvent non seulement être utilisées en tant que classes, mais également en tant qu'autres attributs HTML. Par exemple, vous pouvez les ajouter à l'attribut value du

Dans l'extrait de code ci-dessous, j'ai choisi cette dernière option pour séparer les classes de comportement et de modification . J'ai utilisé les attributs de modificateur slow et ease tant que classes et j'ai créé un attribut d' data-animation personnalisé pour la transition scale-in-up . Le bouton Click me sert à déclencher l'effet.

  




        
          
          
		  Le camion de livraison d'UPS peut déployer un drone et c'est genre de frais
            Les drones ont été utilisés pour le tournage et la photographie aérienne, cependant, l'idée d' utiliser des drones pour livrer des paquets n'est pas non plus nouvelle, étant donné qu'Amazon teste un tel système via son initiative Prime Air depuis un certain temps maintenant . Cependant, Amazon n'est pas seul dans cette entreprise que la société de logistique UPS a commencé à tester son propre système de livraison de drones .Contrairemen
			(Conseils techniques et de conception)
          
        
      

        
          
          
		  Détecter lorsqu'une souris quitte la fenêtre avec Glio.js
            Combien de fois allez-vous fermer un onglet et remarquez une fenêtre modale vous demandant de rester ? Cela semble banal de nos jours et c'est fait pour une raison: ça marche!Vous pouvez créer un effet similaire en utilisant la bibliothèque Glio.js. C'est un script JS open-source gratuit pour détecter quand le curseur de la souris de l'utilisateur est proche du bord ou quand il quitte la fenêtre du navigateur .Cela 
			(Conseils techniques et de conception)
          
        
      

  
  
  

Des Articles Intéressants






				
				

					19 scripts Google Apps utiles pour automatiser Google Drive
					

				
				

					Photographie de jour de pluie: 35 exemples éblouissants
											







				
				

					Comment créer une interface utilisateur de commutateur à l'aide d'un masque CSS
					

				
				

					5 Hacks simples pour rendre Windows 8.1 plus rapide