Al romper las expectativas del usuario de forma ocasional (y bien pensada), puedes atraer más atención a ciertas áreas de tu sitio y crear una experiencia inmersiva y divertida que se sale de lo común. Las secciones con desplazamiento horizontal intencional son un recurso excelente para aplicar esta táctica de UX.
Y como muchos nos habéis preguntado cómo creamos la sección de desplazamiento horizontal en la página de anuncio de Interactions 2.0, hemos pensado en enseñaros cómo hacerlo vosotros mismos.
Antes de empezar, echad un vistazo a la demo de desplazamiento horizontal. O clonad el sitio para investigar y ver cómo está hecho.
Paso 1: Añade y da estilo a los divs contenedores
Para que nuestra sección de desplazamiento horizontal tenga el mayor impacto posible, la hemos colocado en medio de nuestra página de demostración. Si nos sigues, asegúrate de hacer lo mismo.
Para empezar, añade un div al lienzo y asígnale la clase "Gallery". Luego, aplica los siguientes estilos:
- Margen superior: 50px (arriba y abajo)
- Ancho: 100%
- Altura: 4000px
- Posición: Relativa
Para crear el fondo degradado de la sección, añade lo siguiente en la sección de Fondo:
- Tipo: Lineal
- Ángulo: 45°
- Parada de color 1: #662d8c
- Parada de color 2: #ed1e79
Después, añade otro div dentro del div "Gallery" que acabas de crear y llámalo "Gallery Scroll Track".
Establece la posición en absoluta y completa (full). Cambia el índice Z a 1.
Añade otro div más dentro del div "Gallery Scroll Track" y asígnale la clase "Gallery Container" con estos ajustes:
- Ancho: 100%
- Altura: 100vh
- Desbordamiento (Overflow): Oculto
- Posición: Relativa, superior, 0px
Añade otro div dentro del div "Gallery Scroll Track" llamado "Gallery Track" y aplica estos ajustes:
- Ajustes de visualización: Flex
- Diseño Flex: Horizontal, justificado a la izquierda, alineado al centro
- Ancho: 300vw
- Altura: 100%
- Posición: Relativa
Paso 2: Añade tu contenido
A estas alturas, tu panel de navegación debería verse más o menos así:
En los siguientes pasos, añadiremos nuestras imágenes al div "Gallery Track". He optado por añadirlas mediante divs con imágenes de fondo para simplificar las cosas, pero podrías mostrar cualquier cosa, desde fotos de miembros del equipo hasta citas de clientes, e incluso extraer el contenido del CMS.
Así que añade un div al "Gallery Track" y asígnale la clase "Gallery Image" con los siguientes ajustes:
- Elemento Flex: Expandir
- Margen: 20px (en todos los lados)
- Altura: 70vh
- Radio del borde: 5px
Para que las imágenes resalten, también puedes añadir una sombra paralela con estos ajustes:
- Color: rgba (0, 0, 0, 0.25)
- Ángulo: 135°
- Distancia: 1px
- Desenfoque: 19px
- Tamaño: 0px
Ahora tendrás un bloque div que abarca todo el ancho del contenedor de la galería, pero sin imagen de fondo. Como no estoy construyendo esto con contenido dinámico extraído del CMS, añadiré una clase combinada adicional a cada bloque div "Gallery Image" para poder poner una imagen de fondo única en cada elemento.
Selecciona el div “Gallery Image”, añade una combo-class llamada “1”, baja hasta la sección Background y añade una imagen de fondo.
Usa los siguientes ajustes:
- Tamaño: Cover
- Posición: Center
- Mosaico: Ninguno
Ahora añade tu imagen.
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.
Vamos a duplicar este div “Gallery Image” haciendo clic derecho y duplicándolo tantas veces como necesites.
¡Vaya, tenemos un pequeño problema: todas las imágenes son iguales! Como estamos añadiendo las imágenes mediante CSS, cada elemento con la combo-class Gallery Image 1 tendrá la misma imagen de fondo.
Para arreglarlo, abre el panel Navigator, selecciona un div Gallery Image y duplica la clase 1. Luego cambia el nombre a 2, reemplaza la imagen de fondo y repite el proceso para cada combo-class.
Paso 3: Añadir interacciones
Bien, ahora que tienes una combo-class distinta para cada imagen, vuelve al panel Navigator y selecciona el div “Gallery Scroll Track”.
Abre el panel “Interactions”, haz clic en el signo más de la esquina superior derecha y, en el menú desplegable, selecciona “While Scrolling in View”.
A continuación, cambia el “Smoothing” a “60%” y haz clic en el icono del signo más.
Llama a la interacción “Gallery Scroll Trigger”.
Haz clic en el icono del signo más junto al marcador “0%”. En el menú desplegable, selecciona la transformación “Move”.
Con la primera interacción al 0% seleccionada, cambia la posición “X” a “0vw”.
Ahora selecciona la interacción al 100%, cambia el “Keyframe” a “80%” y ajusta la “X” a “-200vw”.
Paso 4: ¡El último paso!
Este es el último paso y es fundamental. Haz clic en el icono “Pages” en el panel de la izquierda.
Pasa el cursor sobre el icono “Home”. Aparecerá el icono “Edit Page Details” a su lado; haz clic en él. Se abrirá un nuevo panel. Baja hasta la sección titulada “Custom Code” y pega el siguiente fragmento de código en el campo “Inside <head> tag”.
<style>
.gallery-container {
position: -webkit-sticky !important;
position: sticky !important;
}
</style>
¡Publica y listo!
