La divulgación progresiva —la idea de revelar información a medida que se necesita— es un concepto fundamental del diseño web. Y aunque suele tratarse en términos de interacciones a nivel de página, también puedes hacer un uso inteligente y divertido de esta idea dentro de interfaces basadas en tarjetas.
Las tarjetas expandibles son la forma perfecta de mostrar el nivel justo de información y, después, un poco más, justo cuando el usuario lo pide. Puedes usarlas en tarjetas de contacto de miembros del equipo, tablas de precios, comparativas de funciones... donde sea que un usuario quiera más detalles, ofrecen un gran nivel de interactividad.
Para simplificar, construiremos esta interfaz con contenido estático, pero podrías hacerlo de la misma manera usando contenido extraído de tus colecciones de CMS de Webflow.
Esto es lo que vamos a crear juntos.
Nota: para este tutorial, asumimos que has configurado una fuente predeterminada en el cuerpo (body).
Paso 1: Añade y da estilo a un div para contener toda la tarjeta
Coloca un div en el lienzo y asígnale el nombre de clase "Expander Container".
Coloca un div en el lienzo y asígnale la clase "Expander Container"
Luego, dale a tu contenedor un margen de 10px en todos los lados y un ancho máximo de 400px.
Después, añade una perspectiva de hijos de 1800px y una transición de transformación, 200ms, ease. Esto controla cómo se verá la transición del estado predeterminado al estado expandido.
A continuación, ve al menú desplegable de estados y selecciona el estado hover (al pasar el cursor). Mientras esté seleccionado, cualquier estilo que definas solo se aplicará cuando un visitante pase el cursor sobre la tarjeta.
Luego, desplázate hacia abajo hasta la sección de Transiciones y Transformaciones y añade una transformación de escala, estableciendo un valor de 1.03 para los ejes X e Y.
Paso 2: Añade las tarjetas giratorias
Coloca 3 divs más dentro del Expander Container y dale a cada uno un nombre único. Aquí he usado Card 1, Card 2 y Card 3.
Paso 2a: Da estilo a la Card 1
Selecciona la Card 1 y asígnale los siguientes estilos:
- Display: flex, horizontal, start, center
- Padding-right: 30px
- Posición: relativa
- Índice Z: 999
- Color de fondo: blanco
- Cursor: puntero
Esos estilos son principalmente de presentación y solo controlan la apariencia y el diseño. El ajuste de Z-index asegura que la Card 1 se muestre por encima de cualquier elemento con un Z-index menor (como las tarjetas 2 y 3). Configurar el cursor como "pointer" indica a los visitantes que esta tarjeta es interactiva.
Paso 2b: Estilo de la tarjeta 2
Aplica los siguientes estilos a la tarjeta 2:
- Relleno izquierdo y derecho: 30px
- Relleno superior e inferior: 10px
- Color de fondo: blanco
En los ajustes de transformación, configura:
- Origen de transformación: superior
- Perspectiva propia: 1800px
- Cara posterior: oculta
Paso 2c: Estilo de la tarjeta 3
Aplica los siguientes estilos a la tarjeta 3:
- Relleno (padding) en todos los lados: 20px
- Alineación del texto: Centrado
- Color de fondo: #242424
Luego, añade los mismos ajustes de transformación que usamos para la tarjeta 2:
- Origen de transformación: superior
- Perspectiva propia: 1800px
- Cara posterior: oculta
Paso 3: Añade tu contenido a los divs de las tarjetas
Ahora toca rellenar nuestras 3 tarjetas con contenido. Empezaremos con la foto del primer miembro del equipo.
Paso 3a: Añade y da estilo a la foto
Añade otro div a la tarjeta 1, asígnale la clase "Team Member Shot" y dale un ancho y alto de 100px. Luego, añade 20px de margen a la derecha.
Por último, añade la foto del miembro del equipo como imagen de fondo, configúrala en modo "cover" y posición centrada.
Aquí tienes esos estilos de nuevo:
- Ancho y alto: 100px
- Margen derecho: 20px
- Imagen de fondo: cover, centrado
Ahora necesitamos un contenedor para el texto. Añade otro div dentro de la Tarjeta 1. No hace falta ponerle clase, ya que es solo un contenedor para el nombre y el cargo, y no se verá afectado por los ajustes de flex que añadimos antes.
Luego añade un H3 y un H5 al div, asígnales a ambos la clase “No Margin” y elimina los márgenes superior e inferior predeterminados de los encabezados.
CONSEJO PRO: Crea una clase llamada “No Margin” y establece el margen superior e inferior en 0px. Esto te da una clase reutilizable que puedes añadir a cualquier elemento de texto para eliminar los márgenes predeterminados y mantener intacta tu configuración tipográfica.
Paso 3b: Añadir contenido a la Tarjeta 2
Añade un H6 y un párrafo, y rellénalos con el contenido adecuado (en nuestro caso, “Sobre mí” para el encabezado y un breve fragmento de lorem ipsum como marcador de posición para la biografía).
Diseña interacciones y animaciones sin escribir código
Crea interacciones y animaciones complejas sin tener que tocar ni una línea de código.
Paso 3c: Añadir contenido a la Tarjeta 3
Añade un H6 y cambia el texto por lo que necesites. Nosotros usamos “Contacto”.
Después, añade otro div y asígnale la clase “Flex Row”. Configura el display como flex, horizontal, con justificación centrada y alineación centrada. Por último, dale un margen izquierdo y derecho del 15% y un margen inferior de 25px.
A continuación, añade 3 bloques de enlace y asígnales a cada uno la clase “Flex Col”, configurando el elemento flex para que se expanda. Ahora añade tus iconos de contacto. Yo usé email, LinkedIn y Twitter con un ancho de 25px.
Para terminar con los iconos de contacto, selecciona cada bloque de enlace y añade la URL correspondiente en el panel de Ajustes.
Paso 4: Añadir interacciones
¡Por fin llegamos a la parte divertida! Vamos a ello.
Primero, selecciona la Tarjeta 2 (la sección “Sobre mí”) y abre el panel de Interacciones. Crea una nueva interacción llamada “Card Initial States”. Dale una transformación inicial de rotación X de -95° con una altura de 0px.
Luego aplica esta misma interacción a la Tarjeta 3.
Como sugiere el nombre “Card Initial States”, esta interacción controla el estado predeterminado de la tarjeta antes de hacer clic, para que no sea visible al cargar la página.
Ahora selecciona la Tarjeta 1, abre el panel de Interacciones y crea una nueva interacción llamada “Card Trigger”.
Añade un activador de clic.
Selecciona “Affect Different Element(s)”, escribe “Card 2” en la barra de búsqueda y limítalo a los elementos hermanos. Luego añade un nuevo paso para el primer clic.
En el panel de Transformaciones, configura la rotación al origen a 250ms con una transición ease-in-out. Luego ajusta la altura a “auto” con una transición de 350ms ease. Haz clic en listo.
Luego, añade un paso en la sección del segundo clic y una espera de 200ms. Ni más, ni menos.
Después, haz clic en nuevo paso.
En este nuevo paso, ajusta la rotación X a -100° con una velocidad de transición de 200ms, ease-in-out. Luego, añade otro paso más.
Aquí, establece la altura en 0px con una transición de 200ms, ease. Haz clic en Listo.
A continuación, vamos a duplicar el activador haciendo clic en el icono de los cuadrados superpuestos que aparece resaltado en la imagen de abajo.
Abre el activador que acabas de duplicar y cambia el título de "afectar a diferentes elementos" a Card 3. A partir de aquí, solo haremos un par de cambios en la interacción.
Primero, añadiremos un tiempo de espera de 250ms en el primer clic. Y cambiaremos la transformación de altura a 150ms ease.
Después, elimina el tiempo de espera del segundo clic y cambia la transformación de altura a 150ms ease.
Yyyyy listo, haz clic en Hecho. ¡Ya está todo listo, pruébalo y disfrútalo!
¿Qué tutoriales te gustaría ver a continuación?
Queremos que triunfes con Webflow, así que cuéntanos en qué más necesitas ayuda y veremos qué podemos hacer.
