Paraíso Para Los Diseñadores Y Desarrolladores

Cómo crear animaciones y transiciones con Motion UI

Las animaciones y las transiciones permiten a los diseñadores visualizar el cambio y diferenciar el contenido. Las animaciones y las transiciones son efectos que ayudan a los usuarios a reconocer cuándo cambia algo en el sitio, por ejemplo, hacen clic en un botón y aparece una nueva información en la pantalla. Agregar movimiento a aplicaciones y sitios web mejora la experiencia del usuario, ya que permite a los usuarios dar sentido al contenido de una manera más intuitiva .

Podemos crear animaciones y transiciones ya sea desde cero o mediante el uso de bibliotecas o marcos. Una buena noticia para nosotros, gente de frontend, es que Zurb, el creador de Foundation, MotionUI de fuente abierta en octubre pasado, su biblioteca de animación y transición basada en Sass.

Originalmente se incluyó con Foundation for Apps, y ahora, para la versión independiente, obtuvo una renovación, que incluye un sistema de colas de animación y patrones de CSS flexibles . Motion UI también potencia algunos componentes del framework de Foundation, como el deslizador Orbit, el conmutador Toggler y el modal Reveal, por lo que es una herramienta bastante robusta.

Empezando

Aunque Motion UI es una biblioteca de Sass, no es necesario que la uses con Sass, ya que Zurb proporciona a los desarrolladores un práctico kit de inicio que contiene solo el CSS compilado. Puede descargarlo desde la página de inicio de Motion UI y rápidamente comenzar a crear prototipos utilizando la animación CSS predefinida y las clases de transición.

El kit de inicio no solo contiene la IU de movimiento, sino también el marco de la Fundación, lo que significa que puede usar la cuadrícula de Fundación y todas las demás funcionalidades de Fundación para sitios si lo desea.

El kit de inicio también se envía con un archivo index.html que le permite probar rápidamente el marco.

Si necesita ajustes más sofisticados y desea aprovechar las poderosas mezclas Sass de Motion UI, puede instalar la versión completa que contiene los archivos .scss origen con npm o Bower.

La documentación de Motion UI todavía está medio cocida. Puede encontrarlo aquí en Github o contribuir si lo desea.

Prototipado rápido

Para comenzar a crear prototipos, puede editar el archivo index.html del kit de inicio o crear su propio archivo HTML. Puede construir el diseño utilizando la cuadrícula de Fundación, pero Motion UI también puede usarse como una biblioteca independiente sin el marco de Foundation.

Hay 3 tipos principales de clases de CSS predefinidas en la IU de movimiento:

Clases de transición: permiten agregar transiciones, como deslizamiento, desvanecimiento y efectos de bisagra a un elemento HTML.
Clases de animación: le permiten usar diferentes efectos de agitación, movimiento y giro
Clases modificadoras: funcionan juntas con clases de transición y animación, y te permiten ajustar la velocidad, el tiempo y la demora de un movimiento.

Construyendo el HTML

Lo mejor de las clases CSS predefinidas es que no solo se pueden usar como clases sino también como otros atributos HTML. Por ejemplo, puede agregarlos al atributo de value de

En el siguiente fragmento de código, elegí esta última opción para separar las clases de comportamiento y modificador . Usé los atributos del modificador slow y ease como clases, y creé un atributo personalizado data-animation para la transición de scale-in-up . El botón Click me sirve para activar el efecto.

  




        
          
          
		  Cómo crear campos personalizados de WordPress La manera fácil
            WordPress proporciona los campos esenciales que nos permiten publicar publicaciones y páginas. Algunos de estos campos incluyen el Editor de contenido, Opciones de categoría, Etiquetas e Imagen destacada .Estos campos, sin embargo, no son suficientes para acomodar ciertos casos. Supongamos que crea un sitio de la Lista de libros que mostrará el autor del libro, el número de ISBN y el editor. Ne
			(Consejos de tecnología y diseño)
          
        
      

        
          
          
		  Problemas de Pokemon Go: preguntas frecuentes y soluciones viables
            Pokemon Go es un fenómeno mundial que ha estado en los titulares durante las últimas semanas y, aunque hay muchos titulares sobre jugadores de Pokemon Go que se meten en todo tipo de aventuras (algunas más inquietantes que otras), muchos más jugadores han tenido problemas dentro el juego.En esta publicación, veremos algunos de los problemas más comunes que enfrentan los jugadores de Pokemon Go, así como por qué el juego se comporta de la manera que lo hace, cómo resolver los problemas rápidamente y volver al juego. Países c
			(Consejos de tecnología y diseño)
          
        
      

  
  
  

Artículos De Interés






				
				

					Desarrollo web: los 10 antipatrones de codificación que debe evitar
					

				
				

					40 fondos de pantalla submarinos pintorescos y hermosos
											







				
				

					Generar consultas de cantidad de CSS con el generador de QQ
					

				
				

					Calcule los ROI de la campaña de correo electrónico con esta herramienta gratuita