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.

Publicaciones relacionadas

Botón volver arriba