Agregue animaciones de UI a su sitio

Feb 2, 2026

Cómo

[dieciséis]

La mayoría de las personas ven las interfaces de usuario diariamente, ya sea dentro de una aplicación móvil o en un sitio web, por lo que es importante hacerlo bien al crearlos (a Creador de sitios web lo hará simple para usted), y si puede animarlos con algunos Animación CSS , todo lo mejor.

Explora la nueva frontera de la animación CSS.

Mientras se construye para la web, especialmente cuando se trata de la animación, debe considerar cosas como el apoyo y el rendimiento del navegador (decente Alojamiento web ayudará aquí). En este tutorial, le vamos a caminar a través de dos de las mejores soluciones para crear animaciones y transiciones de UI.

Estaremos utilizando una combinación de CSS y Grenessock (GSAP). Todos somos conscientes de CSS, pero algunos de ustedes pueden no estar al tanto de la plataforma Greensock. Greensock es un marco de JavaScript que le permite crear fácilmente animaciones impresionantes con elementos HTML usando solo unas pocas líneas de código.

Las imágenes y los logotipos se han destinado especialmente mucho más en los últimos años. ¿Con qué frecuencia usamos Emojis en lugar de texto? Las navegaciones móviles parecen usar iconos en lugar de texto y en el tiempo, los usuarios llegan a saber dónde nos llevará. Vamos a empezar creando una barra de navegación animada solo usando Logos. Cuando se desplaza sobre cada uno, animará al estado final, que se verá similar a esta captura de pantalla. ¿Tienes muchos medios para agregar? Retroceder en almacenamiento en la nube .

[sesenta y cinco] Construir la navegación

En primer lugar, crearemos un nuevo archivo index.html y configuraremos nuestro área de navegación junto con seis enlaces. Cada enlace se compondrá de un icono tomado de ionicons. Tendremos que asignar una clase a cada una.

 & lt; div clase = "navegación de navegación" & gt;
& lt; a href = "#" clase = "Navlogo Ion-iOS-Star-Outline" & gt; & lt; / a & gt;
& lt; a href = "#" clase = "Navlogo Ion-ios-List-List-Outline" & GT; & LT; / A & GT;
& lt; a href = "#" class = "Navlogo Ion-ios-Chatboxes-Outline" & gt; & lt; / a & gt;
& lt; a href = "#" class = "Navlogo Ion-ios-Home-Outline" & GT; & LT; / A & GT;
& lt; a href = "#" clase = "Navlogo Ion-ios-Pie-Skine" & gt; & lt; / a & gt;
& lt; a href = "#" clase = "Navlogo Ion-iOS-Equipe-Outline" & gt; & lt; / a & gt;
& lt; / DIV & GT;

No estaremos cubriendo el documento completo HTML o CSS en detalle, pero usted puede Obtenga el listado de código completo de GitHub .

A continuación, deberemos crear un archivo CSS llamado Style.CSS y luego inserte la siguiente línea de código para importar iIxicons:

 @Import URL (https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.csss);

Ahora estableceremos la clase navitogo Para nuestras imágenes de navegación dentro de la hoja de estilos. Aquí estableceremos la posición, altura, tamaño de fuente, etc.

 .navlogo {
  Posición: Relativo;
  Tamaño de fuente: 40px;
  Ancho: 75px;
  Margen: 40px;
  Altura: 75px;
  Altura de la línea: 75px;
  Pantalla: bloque en línea;
  Color: #fff;
}

.Navlogo: después de {
  Posición: Absoluto;
  TOP: 0;
  fondo: 0;
  izquierda: 0;
  derecha: 0;
  Frontera: 2px sólido # E6E6E6;
  contenido: '';
  z-index: -1;
  Radio fronterizo: 50%;
}

A continuación, necesitamos configurar la animación para nuestra .Navlogo elemento. Aquí crearemos los efectos de rotación y transición, así como cambiar el color del elemento en el flujo.

 .navlogo: antes,
.Navlogo: después de {
  -Webkit-Transition: Todos los 0.45s se alivian;
  Transición: Todos los 0.45s se alivian;
}
.Navlogo: Hover,
.Navlogo: Activo,
.Navlogo.
  Color: # C0392B;
}
.Navlogo: Hover: Después,
.Navlogo: Activo: Después,
.Navlogo.Over: después de {
  Color de la frontera: transparente # C0392B;
  -Webkit-Transform: Gire (360DEG);
  Transformar: Girar (360DEG);
}

Finalmente, tendremos que agregar un evento que elimine la clase de Hover cuando el mouse ya no esté flotando sobre nuestros logotipos. Esto es para asegurarse de que nuestro logotipo salga de su animación. Cree un nuevo archivo JavaScript llamado main.js y luego ingrese el siguiente código:

 $ (". Hover"). Mouseleave (
  función () {
    $ (esto) .Removeclass ("Hover");
  }
);

Nuestra navegación ya está lista para ir, además de agregar algunos hipervínculos. Hemos logrado lograr esto solo utilizando CSS3.

[sesenta y cinco] Crea y anima los botones en la carga.

Ahora agregaremos cuatro botones a nuestra página y usaremos la biblioteca Greensock para traer lentamente cada botón, uno tras otro con un retardo de un segundo. Esto creará un buen efecto de transición.

Primero, deberemos reabrir el archivo index.html y crearemos nuestra sección de botón usando el código a continuación:

 & lt; div id = "ButtonArea" & GT;
& lt; Button Class = "Anutibton" & GT; Cambiar el color de fondo & lt; / Button & GT;
& lt; botón clase = "anuttton" & gt; Opción 1 & lt; / Button & GT;
& lt; Button Class = "Anutibton" & GT; Opción 2 & lt; / Button & GT;
& lt; Button Class = "Anutibton" & GT; Opción 3 & lt; / Button & GT;
& lt; / DIV & GT;

Luego necesitamos configurar una referencia a la biblioteca de Greensock dentro de la cabeza & gt; sección.

 & lt; script src = "https://cdnjs.cloudflashle.com/ajax/libs/gsap/1.19.1/tweenmax.min.js" & gt; & lt; / script & gt;

Finalmente, necesitamos configurar nuestra animación. Esto solo tomará una línea de código. Tambalearse Es una función que tambaleará la hora de inicio de nuestro elemento. En nuestros soportes, especificamos el nombre del elemento. En este caso sería .anutiberton . También necesitamos establecer una duración y, en este caso, se establece en un segundo entre cada Anitton elemento.

 tweenmax.staggerfrom ('. Anutiberton', 1, {Opacidad: 0}, 1);

[sesenta y cinco] Transición de color de fondo y elemento

Lo siguiente que vamos a mirar es la transición del fondo del sitio web y los botones de un color a otro. A menudo, no nos encontramos con esta característica en los sitios web, aunque definitivamente sería interesante para las cosas como la accesibilidad o las preferencias de la aplicación web cuando el usuario podría querer configurar su propio esquema de color.

Asegúrese de tener un color de fondo y un borde de borde y un color de texto para su página en el archivo style.css.

 .anuttton {
Frontera: 2px sólido # 000;
Color: # 000;
}

A continuación, crearemos una función de JavaScript para configurar nuestras diversas transiciones de color Greensock.

 Cambio de función ()
{
   TWEENMAX.TO ("CUERPO", 3, {backgroundImage: "degradado lineal (a la izquierda, # 646580, # 212121)"});
   TWEENMAX.TO (". ANUDNUTTON", 3, {color: "# FFF"});
   TWEENMAX.TO (". ANUDNUTTON", 3, {frontera: "2px sólido #fff"});
}

Vamos por más de un modo oscuro. Mire aquí, por lo que el fondo estará oscuro, pero los botones aparecerán ligeros. La primera línea de código cambiará el color de fondo a una variación más oscura durante un período de tres segundos. La segunda y la tercera línea cambiará el color y el borde del texto a blanco durante un período de tres segundos.

Finalmente, tendremos que llamar al cambiar el fondo() Funciona de uno de nuestros botones que se encuentra en el archivo index.html.

 & lt; Button Class = "Anutiberton" onClick = "Changefbackground ()" & gt; Cambiar el fondo & lt; / Button & GT;

El proyecto ya está listo para correr. Por supuesto, puede ir mucho más lejos agregando nuevos elementos y cambiando el estilo de color para esos, también.

Este artículo se publicó originalmente en el número 309 de neto , la revista más vendida del mundo para diseñadores web y desarrolladores web. Comprar emisión 309 aquí o Suscríbete aquí .

Artículos relacionados:

Animar y cambiar los títulos con CSS.
5 consejos para CSS super rápido
Una introducción a las propiedades personalizadas de CSS.

Agregue animaciones de UI a su sitio

Cómo - Artículos más populares

6 consejos rápidos para mejorar el dibujo de su pincel

Cómo construir un blog con Jekyll

Cambio de color de Photoshop: 2 herramientas que necesita saber

Comience con la plataforma de animación de Greensock

Cómo crear obras de arte de juego estilizado

Pinte una escena de cuento de hadas clásico con procrear

Todo lo que necesita saber sobre el nuevo nodo.js 8

Acelera su modelado 3D

Categorías