En el diseño web, como en los demás diseños, las tendencias vienen y van. Sin embargo el Full Screen en diseño web se ha mantenido durante varios años, sigue siendo una apuesta segura. En este post, además de comentar algún aspecto de este tipo de diseños, os dejo el código explicado para que podáis hacer la vuestra.
En las web full screen, el contenido llena toda la pantalla del navegador, independientemente de la resolución que estemos usando, son responsive.
Son pantallas con un fuerte impacto visual, ideales para presentar un producto. El menú suele ser de hamburguesa y un icono en forma de flecha o ratón nos indica que la web continúa en navegación vertical.
El diseño full screen suele plantearse solo en el primer módulo de información, pasando luego a una web de navegación vertical, aunque también hay diseñadores que apuestan por hacer todos los módulos de contenido en full screen.
Vamos por partes:
1 BACKGROUND. IMAGEN DE FONDO
Es importante encontrar una imagen que no deje indiferente, que sea impactante y a ser posible «limpia», ya que sobre ella habrá texto, y cualquier detalle pequeño puede no verse. Además aconsejo meter un filtro que oscurezca un poco la imagen para ganar en legibilidad del texto que va encima.
En este ejemplo, he usado dos imágenes con formatos distintos para que veáis la diferencia. La primera (rosa) es vertical y la del segundo bloque apaisada. Si modificáis el tamaño de la ventana del navegador, veréis que el comportamiento de la segunda se adapta mucho mejor a todas las resoluciones desktop, y la primera funcionará mejor en las pantallas mobile.
Vamos al código CSS. Se trata de hacer que la imagen ocupe el 100% de la ventana del navegador:
- capa1 y capa2; son los contenedores de los dos módulos. En este ejemplo de web he usado dos módulos full screen.
- height: 100vh; con esta orden, le decimos a la CSS que el alto de la imagen tiene que ocupar el 100% del alto de la ventana del navegador.
- background-size:cover; indicamos que la imagen debe ocupar todo el contenedor, incluso si tiene que estirarse.
- background-position: center top; aquí indicamos que la imagen crezca o encoja desde el punto situado en el eje central de la imagen y desde su punto superior.
- padding: 200px 0 0 10%; para colocar el texto, he decidido separarlo 200px del top y un 10% del ancho de pantalla del margen izquierdo.
Como decía antes, es conveniente oscurecer un poco la imagen de fondo para hacer más legible el texto, esto puedes hacerlo de dos maneras, la primera con photoshop o el editor de imágenes que suelas utilizar, la segunda forma de hacerlo es con CSS, le aplicamos a toda la capa un gradiente negro con una opacidad que iremos modificando según nuestra conveniencia, en este caso un 60%
2 FLECHA EN EL BOTTOM PARA CONTINUAR NAVEGACIÓN
En la parte inferior de la ventana de navegación, he colocado una flecha que con un movimiento suave vertical, indica que la navegación sigue más abajo. Además he puesto un enlace en la flecha para que al pulsar sobre ella muestre el segundo bloque, vamos a ver cómo se hace esto:
En primer lugar, en lugar de usar una imagen png para la flecha, usamos una fuente, de ese modo no se pixelará y será más nítida en cualquier resolución. Para ello usamos este icono.
En el código, podéis ver todos los parámetros de la flecha. Con translateY movemos la flecha 20px en vertical. La duración de la animación es de 0.7s y es un loop infinito.
A continuación os dejo el código, espero que os sea útil.
NOTA: coloca el visor en 0.5x para ver bien el efecto
See the Pen
LANDING FULL SCREEN by Omar Benyakhlef Domnguez (@gloobs)
on CodePen.
