Crea animaciones de UI Slick

Sep 14, 2025
Cómo
A team page showing team member photos, names and job titles with rollover animation that shrinks the size of the profile image, brings down a coloured circle from the top and brings up social media icons from the bottom.
[dieciséis]

Más y más frecuentemente, los diseñadores y desarrolladores reconocen la importancia del diseño de movimiento en el contexto de experiencia de usuario . La animación en la web ya no es una forma de deleitar y WOW al usuario, sino una herramienta funcional que hace que las experiencias sean fáciles, divertidas y memorables. Y hay una serie de herramientas y enfoques diferentes disponibles, desde Animación CSS a las técnicas utilizando bootstrap o html.

La animación en el contexto de las interfaces de usuario sigue siendo un campo muy nuevo. No hay muchos recursos que imparten mejores prácticas o muestran patrones comunes de animación de UI que podemos seguir. La mayoría de las veces, se trata de la experimentación, Pruebas de usuario Y quizás un poco de prueba y error.

  • 15 tutoriales de diseño web sensibles

Entonces, en este tutorial, crearemos algo que no confunda, sigue patrones comunes y es elegante. Esta será la sección del perfil del equipo que a menudo se ve en los sitios web de la compañía. La idea es mostrar un poco más de información sobre el equipo / miembro del personal cuando cada uno se controla. A lo largo del tutorial utilizaremos Codepen, pero, por supuesto, puede usar su propio editor y entorno de desarrollo favoritos. Recuerde, crear un sitio más complejo puede cambiar su Alojamiento web Necesita, así que asegúrese de tener un servicio que funcione para usted.

¿Te gustaría una herramienta directa para hacer un sitio? Usa un brillante Creador de sitios web .

01. Ponerse en marcha

Comience por abrir Codepen y creando una nueva pluma. Vamos a usar Bootstrap 4 y SASS (.SCSS), así que asegúrese de que dentro de la configuración incluya el CSS de Bootstrap CSS y JS como enlaces de recursos y también configure el CSS a SCSS. Otro vínculo de recursos deberá agregar es increíble, lo que usaremos para nuestros iconos sociales.

02. Crear contenedores, filas y columnas.

Los contenedores son lo que Bootstrap utiliza como su elemento de diseño básico y se requieren cuando está utilizando el sistema de cuadrícula predeterminado. Dentro de los contenedores, debe agregar en una fila. Las filas son envoltorios para columnas y puede especificar el número de columnas que desea de una posible una posible 12 y lo que será el punto de interrupción. En nuestro caso, queremos un elemento que tenga un punto de interrupción de tamaño mediano y llena tres columnas de ancho. 

 & lt; div clase = "contenedor" & gt;
 & lt; div clase = "fila" y gt;
 & lt; div clase = "col-md-3" & gt;
 & lt;! - Añadir enlace de imagen y color aquí
 & lt; / DIV & GT;
 & lt; / DIV & GT;
& lt; / DIV & GT;

03. Establecer imagen de perfil y color.

El primer elemento de interfaz de usuario en el que comenzaremos será para un miembro del equipo femenino y será parte del equipo azul. El color se especificará utilizando una clase llamada azul y el color real se definirá con eventualmente usando variables de SASS, que haremos en un paso posterior. Luego tendremos que agregar en una foto y darle una foto llamada foto. 

 & lt; Div Class = "Team Blue" & GT;
    & lt; div clase = "foto" & gt;
       & lt; img src = "https://image.ibb.co/kcbgms/profile_test02.jpg" alt = "libby" & gt;
     & lt; / DIV & GT;
& lt; / DIV & GT;

04. Añadir nombre de perfil y título

The beginning of creating a team member entry showing that a team member photo, job description and social media information.

[dieciséis] Una pieza final de HTML agregará un nombre, título y iconos sociales.

El último bit de HTML que se agregará será para el nombre, título y iconos sociales, que se agregarán debajo de la última etiqueta DIV que acabamos de agregar en el último paso. Para los iconos sociales, estaremos utilizando la fuente increíble y estos se colocarán dentro de una lista desordenada. 

 & lt; div clase = "Perfil-txt" & gt;
      & lt; H1 Class = "Título" & GT; Libby & Lt; / H1 & GT;
      & lt; span class = "Position" & gt; Web Designer & Lt; / Span & GT;
   & lt; / DIV & GT;
          & lt; ul class = "socio-icons" & gt;
       & lt; li & gt; & lt; a href = "" class = "fa fa-facebook" & gt; & lt; / a & gt; & lt; / li & gt; / li & gt;
       & lt; li & gt; & lt; a href = "" class = "fa fa-twitter" & gt; & lt; / lt; & lt; / li & gt; / li & gt;
       & lt; li & gt; & lt; a href = "" class = "fa fa-linkedin" & gt; & lt; / a & gt; / li & gt; / li & gt;
       & lt; li & gt; & lt; a href = "" class = "fa fa-dribble" & gt; & lt; / a & gt; / li & gt; / li & gt; / li & gt;
    & lt; / ul & gt;
 & lt; / DIV & GT;
& lt; / DIV & GT;

05. Establecer variables de SASS

Si está siguiendo a lo largo del uso de CODEPEN, entonces ya tendrá SASS instalado y listo para ir. Solo necesita hacer clic en el icono / botón de configuración de la pluma y elegir SCSS como su preprocesador CSS. Luego podemos seguir adelante y agregar algunas variables que almacenarán todos nuestros colores. Hemos utilizado RGBA como los valores de color para permitirnos un control más significativo de toda la opacidad de los colores. 

 $ BlueGradient: RGBA (103, 188, 223, .8);
$ lightGreen: RGBA (188, 219, 183, .5);
$ GREEN: RGBA (119, 180, 109, 0.5);
$ Green-Border: RGBA (171, 221, 164, 0.5);
$ azul: RGBA (80, 205, 227, 1);
$ Blue-Border: RGBA (147, 223, 236, 1);

06. Subir una imagen de fondo

Para que las cosas se vean más atractivas, colocaremos una buena imagen de fondo en el cuerpo. Aquí podemos usar nuestro primer conjunto de variables y darle la imagen de fondo una comprensión de una superposición de gradiente que va de verde claro a azul. Luego, para hacer que nuestra imagen de fondo sea totalmente sensible, estableceremos la altura de la vista a 100VH. 

 Cuerpo {
 Antecedentes: degradado lineal (a la derecha, $ lightGreen, $ bluegradient), URL ('https://image.ibb.co/mddpu7/clouds_cornfield_counntryside_158827.jpg') Centro sin repetición;
 Tamaño de fondo: cubierta;
 Posición: Relativo;
 Altura: 100vh;
 }

07. Elige un perfil de fondo e imagen.

Cada perfil de equipo recibirá los mismos estilos y se utilizará el equipo de clase para esto. El fondo será blanco, todo el contenido centrado y debemos asegurarnos de que la posición esté configurada en relación con el pariente. Luego podemos incluir el CSS para la imagen de perfil. Para obtener los mejores resultados, asegúrese de que la imagen original que use tiene dimensiones no más grande que el cuadrado de 200px. Sin embargo, cambiaremos la altura y el ancho de estos dentro de la regla de la foto CSS. 

 .team {
 relleno: 30px 0 40px;
 margen superior: 60px;
 Fondo: #fff;
 Text-alinec: Centro;
 Desbordamiento: oculto;
 Posición: Relativo;
 cursor: puntero;
 Box-Shadow: 0 0 25px 1px RGBA (0,0,0,0.3);
 .Foto {
 Pantalla: bloque en línea;
 Ancho: 130px;
 Altura: 130px;
 Margen inferior: 50px;
 Posición: Relativo;
 Índice Z: 1;
 }
 }

08. Añadir las animaciones.

An image show that the rollover animation bringing down a coloured circle from the top of the frame.

[dieciséis] Podemos controlar cuánto del círculo azul se puede ver al establecer un porcentaje inferior para su posición

La primera pieza de animación que agregaremos será en la parte superior de nuestro elemento de perfil. La idea es que cuando pasamos sobre todo el elemento, una forma circular azul se animará. Podemos controlar cuánto de los azules podemos ver especificando la posición de esto para tener un porcentaje inferior. Así que juega con este porcentaje y obtendrás una mejor idea de cómo funciona esto. Nunca lo sabes: ¡puedes incluso descubrir un mejor efecto! 

 .Blue .Photo: ANTES DE {
 contenido: "";
 Ancho: 100%;
 Altura: 0px;
 Radio fronterizo: 50%;
 Fondo: $ azul;
 Posición: Absoluto;
 fondo: 130%;
 derecha: 0;
 izquierda: 0;
 Transformar: escala (3);
 Transición: Todos .3s Linear 0s;
}
.team: hover .photo: antes
 Altura: 100%;
}

09. Animar la foto del equipo.

La foto del equipo es nuestro punto focal en esta UI y es probablemente el elemento más obvio que usted esperaría animar en alguna forma o forma. El CSS agregaremos en este paso, primero girará la foto en un círculo más pequeño, luego, cuando se supo, habrá una frontera azul clara agregada a ella y la foto disminuirá junto con la frontera. Con las transiciones agregadas, obtenemos una bonita animación de fluidos. 

 .Blue .PIC: después de {
 contenido: "";
 Ancho: 100%;
 Altura: 100%;
 Radio fronterizo: 50%;
 Fondo: $ azul;
 Posición: Absoluto;
 TOP: 0;
 izquierda: 0;
 Índice Z: 1;
}
.Team .foto img {
 Ancho: 100%;
 Altura: Auto;
 Radio fronterizo: 50%;
 transformar: escala (1);
 Transición: Todos los 0.9s facilidad 0s;
}
.BLUE: Hover .photo img {
 Box-Shadow: 0 0 0 14px $ Blue-Border;
 Transformar: escala (0.6);
 }

10. Tweak el nombre del perfil y la posición

An image showing the half completed rollover animation, showing the team member photo shrinking and generating a thick border.

[dieciséis] Cuando se cierne, se agregará un borde azul claro a la foto.

El nombre del perfil y la posición necesitan un poco de ordenación. Estos no serán animados, pero eso no debería impedirle agregar su propia animación a estos si lo desea. Tal vez la escale ligeramente en el flujo, ya que tendrá suficiente espacio debido al cambio de tamaño de la foto. 

.profile-txt {
 margen de fondo: 30px;
 .título {
 Tamaño de fuente: 2REM;
 Peso de fuente: 700;
 Color: # 333;
 Espacio de letras: 1.5px;
 Transformación de texto: capitalizar;
 margen inferior: 6px;
 }
 .posición{
 bloqueo de pantalla;
 Tamaño de fuente: 1REM;
 Color: # 555;
 }
}

11. Añadir iconos sociales.

Los iconos sociales primero se colocarán en la parte inferior de la página por -100px. Luego, cuando pasamos sobre él, la posición inferior se establecerá en cero y con una transición agregada, esto nos dará una buena animación suave a medida que se alza en la vista. Los iconos se les dará su propio estado de flores, estableciendo su fondo a blanco y el icono a azul. 

 .Blue .Social-Iconos {
 Ancho: 100%;
 Estilo de lista: Ninguno;
 relleno: 0;
 Margen: 0;
 Fondo: $ azul;
 Posición: Absoluto;
 fondo: -100px;
 izquierda: 0;
 Transición: la facilidad de 0.6s;
 li {
 Pantalla: bloque en línea;
 
 a {
 bloqueo de pantalla;
 relleno: 8px;
 Tamaño de fuente: 1REM;
 Color: #fff;
 Decoración de texto: Ninguno;
 Transición: Todo 0.5s facilidad;
 & amp;: hover {
 Color: $ azul;
 Fondo: #fff;
 }
 }
 }
}
.team: Hover .Social-Iconos {
 fondo: 0px;
}

12. Hacer el miembro del equipo verde.

Para mezclar un poco, podemos comenzar a agregar más miembros a nuestro equipo. El color que usaremos para este próximo será verde. Pero primero vuelva a la sección / archivo HTML y todo lo que tenemos que hacer es copiar la clase COL-MD-3, no la fila, hasta la última etiqueta DIV debajo de los iconos sociales y pegarlo. 

 & lt; div clase = "Team Green" & GT;
 & lt; div clase = "foto" & gt;
 & lt; img src = "https://image.ibb.co/mprlns/mick_ui.jpg" Alt = "Libby" & GT;
 & lt; / DIV & GT;

Una vez que haya cambiado la clase azul a verde, finalmente podemos agregar todos los CSS que nos darán la misma animación. 

 .green: Hover .photo img {
 Box-Shadow: 0 0 0 14px $ Green-Border;
 Transformar: escala (0.6);
 }
.Green .Photo: Antes {
 contenido: "";
 Ancho: 100%;
 Altura: 0px;
 Radio fronterizo: 50%;
 Fondo: $ verde;
 Posición: Absoluto;
 fondo: 135%;
 derecha: 0;
 izquierda: 0;
 Transformar: escala (3);
 Transición: Todos .3s Linear 0s;
}
.Enreen. Iconos sociales {
 Ancho: 100%;
 Estilo de lista: Ninguno;
 relleno: 0;
 Margen: 0;
 Fondo: $ verde;
 Posición: Absoluto;
 fondo: -100px;
 izquierda: 0;
 Transición: la facilidad de 0.6s;
 li {
 Pantalla: bloque en línea;
 a {
 bloqueo de pantalla;
 relleno: 8px;
 Tamaño de fuente: 1REM;
 Color: #fff;
 Decoración de texto: Ninguno;
 Transición: Todo 0.5s facilidad;
 & amp;: hover {
 Color: $ verde;
 Fondo: #fff;
 }
 }
 }
}

Y la belleza de este enfoque es que puede repetir según sea necesario para muchas clases de color diferentes, lo que le permite su sutile the UI Animations, como se requiere.

Si está construyendo un sitio con un equipo, asegúrese de obtener confiable, seguro almacenamiento en la nube Para mantener las cosas cohesivas.

Este artículo fue publicado originalmente en el número 307 de neto , la revista más vendida del mundo para diseñadores web y desarrolladores web. Comprar emisión 307 o suscribirse a la red .

¿Quieres aprender más sobre los ins y fuera de la animación de la UI?

Steven Roberts is giving his talk CSS Animation: Beyond Transitions at Generate London from 19-21 September 2018.

[dieciséis] Steven Roberts le está dando su animación CSS: más allá de las transiciones en Generar Londres

Si está interesado en aprender más sobre cómo puede hacer que sus sitios sean pop y brillen con la animación de UI Sleek, asegúrese de haber recogido su boleto para Generar londres .

Un diseñador de front-end y desarrollador que trabaja actualmente como desarrollador creativo para ASEMBLR.com, Steven Roberts entregará su animación de conversación: más allá de las transiciones, en las que le mostrará las mejores herramientas para el trabajo y recrear algunas de las mejores animaciones. La web tiene para ofrecer, mientras descubre las posibilidades y las limitaciones de la animación con solo CSS.

Generar Londres tiene lugar del 19 al 21 de septiembre de 2018. Obtenga su boleto ahora .

Artículos relacionados:

  • Cómo usar la animación en aplicaciones móviles
  • La Guía del Pro To DISEÑO DE UI
  • Una guía para principiantes para diseñar animaciones de interfaz.

Cómo - Artículos más populares

Cómo crear obras de arte de juego estilizado

Cómo Sep 14, 2025

[dieciséis] El estilo de arte del videojuego de supervivencia en primera persona. Oscuro oscuro Puede ser engañosamente di..

Entendiendo la propiedad de pantalla CSS

Cómo Sep 14, 2025

[dieciséis] Es medianoche, y ese div En su sitio todavía se parece al cofre de juguete de un niño. Todos los elementos so..

Las reglas de la tipografía web sensible

Cómo Sep 14, 2025

La tipografía web sensible es difícil: debe tener chuletas de diseño y conocimientos técnicos. Pero sin embargo, es difícil que pueda ser, obtenerlo mal no es una opción, porque la tipo..

Cómo crear personajes de dibujos animados peludos

Cómo Sep 14, 2025

Página 1 de 2: Página 1 Página 1 Página 2 Diseño de perso..

Agregue señales visuales a su sitio

Cómo Sep 14, 2025

[dieciséis] Es molesto que los usuarios del sitio web hagan clic en un enlace solo para encontrar que la página web no es de interés..

Edad de una fotografía en Photoshop CC

Cómo Sep 14, 2025

[dieciséis] Envejecer una fotografía en Photoshop es una técnica clásica que puede volverse incluso una imagen a todo color Ho-Hum,..

Modelando una nave espacial para el diseño de juego

Cómo Sep 14, 2025

[dieciséis] Con Espacio fracturado Siendo lo que es: un juego de combate de equipo gratuito para jugar: los barcos y sus ha..

Consigue creativo con los retratos y la licuificación de la cara

Cómo Sep 14, 2025

[dieciséis] Todos hemos jugado con la herramienta Liquify en Photoshop, pero en la última iteración de Photoshop CC, Adobe ..

Categorías