10 fragmentos de HTML y CSS para crear dise√Īos de pantalla dividida

Las IU de pantalla dividida se han convertido en una forma popular de mostrar contenido. A menudo pensamos que se utilizan en √°reas donde queremos que los usuarios elijan entre dos opciones. Pero tambi√©n estamos viendo otros usos creativos de la t√©cnica. Por ejemplo, una pantalla dividida tambi√©n se puede usar con gran efecto como un dise√Īo de p√°gina completa o incluso como una animaci√≥n de transici√≥n.

Aqu√≠ hay 10 ejemplos de IU de pantalla dividida, completa con el c√≥digo fuente que puede editar para satisfacer sus necesidades. Cada uno tiene algo √ļnico para ofrecer.

Hacer una eleccion

Esta es sin duda la forma m√°s com√ļn de usar una pantalla dividida. Un visitante del sitio web se presenta con dos opciones. Aqu√≠, los colores de la imagen de fondo ayudan a proporcionar una separaci√≥n agradable, mientras que el logotipo redondeado en el medio une todo.

División de un control deslizante

Una pantalla dividida también crea un interesante efecto de transición, como vemos en el siguiente ejemplo de presentación de diapositivas. Desplazarse hacia abajo hace que cada mitad de la pantalla se divida y revele la siguiente imagen en la cola. El resultado es una interfaz de usuario muy suave y de alta gama.

Dise√Īo de p√°gina con una barra lateral est√°tica

Con las pantallas HD dominando y 4k ganando terreno, m√°s dise√Īadores est√°n comenzando a aprovechar ese espacio extra de la pantalla. Este dise√Īo de ejemplo proporciona una barra lateral est√°tica con una imagen de fondo en negrita. Pero tambi√©n se ve muy bien en pantallas m√°s peque√Īas, ya que esa barra lateral se convierte en un encabezado. Es a la vez atractivo y funcional.

Por el bien de las comparaciones

Otra tendencia que est√° ganando terreno es utilizar la pantalla dividida para comparar im√°genes de “antes” y “despu√©s”. Aqu√≠ tenemos una configuraci√≥n que permite a los usuarios simplemente mover el mouse para ver las diferencias entre dos im√°genes. Utilizando solo un poco de JavaScript, esta interfaz de usuario es un giro interesante en la t√©cnica.

Galería alterna

El efecto de desplazamiento “mitad por mitad” con este ejemplo agrega un toque √ļnico. Casi parece que las tarjetas y las fotos se apilan alternativamente una encima de la otra a medida que se desplaza. Y dado que utiliza menos de 150 l√≠neas de CSS puro, el tiempo de carga no deber√≠a ser una gran preocupaci√≥n.

Dise√Īo de revista

Este dise√Īo emula algo que puede encontrar en una revista impresa. El t√≠tulo en negrita y el texto introductorio a la izquierda proporcionan un contraste excelente con la foto y el art√≠culo de varias columnas a la derecha. En general, tiene un aspecto muy elegante y profesional.

Resumen de servicios

El concepto aquí es realmente genial desde una perspectiva de marca. Utiliza una pantalla dividida dentro de una página donde tiene un mensaje de marca estático a la izquierda, combinado con una lista desplazable de servicios ofrecidos a la derecha. Es simplemente diferente y una forma de destacarse un poco de la multitud.

Efectos de desplazamiento de pantalla dividida

Muy a menudo vemos hermosos dise√Īos de pantalla dividida, pero no mucho en cuanto a la interactividad. El siguiente ejemplo agrega el ingrediente que falta con algunas transiciones de escala b√°sicas al pasar el mouse por encima. Lo bueno de esto es que proporciona esa peque√Īa se√Īal visual adicional para el usuario.

Carrusel 3D

Las transiciones entre diapositivas en este carrusel literalmente agregan una nueva dimensi√≥n a las pantallas divididas. Cada diapositiva se “divide” a la mitad mientras que la siguiente se revela en un formato 3D genial. Aqu√≠ hay una cierta calidad similar a una m√°quina que podr√≠a ser una gran opci√≥n para una empresa de ingenier√≠a o industrial.

Split Reveal

La práctica de desplazarse hacia abajo en una página puede volverse aburrida muy rápidamente. Es sorprendente que no nos quedemos dormidos en el proceso. De vez en cuando es una buena idea traer algo diferente al desplazamiento, como este efecto de revelación dividida. La animación agrega un poco de personalidad y emoción a la experiencia. Incluso puede ayudar a atraer a los visitantes a participar más en su sitio.

Dividir es la diferencia

Lo que comenz√≥ como una forma de elegir entre A o B se ha convertido en algo m√°s. Los dise√Īos y animaciones divididos ofrecen a los dise√Īadores otra v√≠a creativa para fomentar la interacci√≥n. Si bien todav√≠a los vemos en su forma tradicional, tambi√©n encontramos que se est√°n utilizando para mejorar cosas como desplazarse por el contenido y las galer√≠as de im√°genes. Incluso se est√° utilizando para imitar t√©cnicas de dise√Īo de impresi√≥n.

Con suerte, los ejemplos anteriores servir√°n de inspiraci√≥n para las formas en que puede agregar una interfaz de usuario dividida a sus propios proyectos. Divi√©rtete experimentando e implementando caracter√≠sticas que se ven geniales y agregan algo √ļnico a la mezcla.