Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Parallax Scrolling

Crear un efecto de fondo enmascarado con CSS

by
Difficulty:BeginnerLength:LongLanguages:

Spanish (Español) translation by Yair Rodriguez (you can also view the original English article)

Final product image
What You'll Be Creating

Hoy vamos a crear paso a paso una técnica realmente asombrosa que puedes usar como un efecto muy parecido al desplazamiento parallax, sin usar nada de JavaScript, se puede lograr simplemente a través de solo CSS.

Comienza por revisar la versión online para ver lo que vas a aprender. (Para ver el efecto necesitarás una computadora de escritorio o laptop).

Esta técnica podría ser usada para crear páginas con geniales descripciones de productos, o incluso algo parecido a una presentación PowerPoint/Keynote, y sería genial para las ilustraciones de alguna historia en linea.

Aquí esta cómo se hace.

Todo esta en el CSS

La clave para esta técnica con CSS es background-attachment: fixed;, disponible desde la versión 2.1. Cualquier imagen de fondo con este estilo se aplicará a la misma y se mantendrá en una posición fija con respecto a la ventana (no al elemento que se aplica). Lo usaremos para mantener nuestras ilustraciones en un lugar mientras nuestro contenido se desplaza independientemente de él.

Un par de cosas a tener en cuenta con esta propiedad son que como imágenes de fondo se fijarán en relación a la ventana, su posición no se verá afectada por cosas como márgenes en el camino como otra imagen de fondo lo haría.

También deberías saber que, si bien la propiedad funciona de maravilla en todos los navegadores de escritorio, no funciona correctamente con la versión móvil de Chrome y puede ser un poco distinto en los otros navegadores móviles. Así, mientras los visitantes ven las imágenes bien, el efecto de este desplazamiento puede verse mucho mejor en los navegadores de escritorio.

Cómo se hace

Los pasos básicos para lograr tal efecto como se ve en la versión online son:

  1. Crear un elemento contenedor y agregar el contenido a él.
  2. Ajusta el contenedor (un div en nuestro caso) para tener padding en un lado alrededor del 50% de anchura, y así empuje el contenido hacia el otro lado.
  3. Agrega una imagen de fondo, también con un 50% de anchura, y posiciónala en el lado contrario al contenido.
  4. Ajusta la propiedad background-attachment: fixed; y ve la magia del desplazamiento.

Vamos a ver paso a paso cómo hacer todo esto. Necesitarás los archivos iniciales para este tutorial con las imágenes requeridas.

1. Configuración Básica

Empieza por crear la carpeta del proyecto, y agrega un archivo index.html dentro, también una carpeta css con un archivo de nombre style.css y guárdalo. Copia y pega las cuatro imágenes que descargaste de los archivos iniciales dentro de una carpeta de nombre images.

Agrega este HTML al index.html:

Lo que estamos haciendo aquí es configurar nuestro archivo HTML, agregando nuestra hoja de estilos y algunos tipos de letra de Google Fonts, después creando nuestro primer div contenedor al que le aplicaremos esta técnica.

El div contenedor tiene tres clases:

  1. .content - usada para establecer algunas propiedades que serán comunes en todos los demás contenedores.
  2. .right - identifica que este contenedor deberá tener el contenido alineado a la derecha (también vamos a trabajar con un contenedor alineado a la izquierda más adelante)
  3. .illustration_01 - usado para establecer la imagen de fondo y el color para este contenedor

Añadiendo estilos

Ahora estamos listos para algo de CSS. Empieza por agregar a tu archivo style.css lo básico para normalizar y formatear el código:

Ahora, para la clase .content. Agrega esto al final de tu hoja de estilos:

En esta clase es donde la mayor parte de la magia sucede. Para el texto, establecemos nuestro tamaño de fuente y color. Para el fondo como verás empezamos por fijar la propiedad background-size a un 49% auto.

Esto significa que la imagen de fondo siempre se reducirá o estirará para llenar el 49% del ancho de la página, y la altura se ajustará proporcionalmente. Estamos usando un valor de 49% en lugar de 50% porque de lo contrario Firefox muestra una línea rara en el centro de la pantalla.

A continuación establecemos background-fixed que, como usted ya sabe de la descripción anterior, hace que la imagen de fondo se quede fija cuando nos desplazamos, y hace que se posicione con respecto a la ventana en lugar del contenedor al que se aplica.

Finalmente fijamos background-repeat: no-repeat; para asegurarnos que nuestra imagen aparezca solo una vez en la página.

A continuación agrega la clase .right a tu hoja de estilos:

Esta última clase coloca el contenido del texto en una mitad de la pantalla y la imagen de fondo en otra.

La propiedad background-position nos dice que la posición de la imagen de fondo será de cero píxeles desde el lado izquierdo de la ventana y alineado a la mitad del mismo hacia abajo desde la parte superior de la ventana.

Por último agrega la clase .illustration_01:

Esto especifica la imagen de fondo y el color que queremos para el contenido de este contenedor.

Echa un vistazo a tu sitio y debería verse como esto:

Cuando te desplazas hacia abajo deberías ver el contenido deslizarse mientras la imagen permanece exactamente donde está.

2. Agrega un Segundo Contenedor

Vamos a agregar un segundo contenedor, éste con el contenido alineado a la izquierda.

Añade este contenido HTML a tu contenedor después del último div:

Observa que esta vez usamos la clase .left en lugar de .right y hemos aumentado el número de ilustración en la clase .illustration_01 por .illustration_02

Agrega las siguientes dos clases a tu hoja de estilos:

Esta vez hemos aplicado el 50% de padding del lado derecho del contenedor de manera que el contenido sea empujado hacia la izquierda, y el fondo está posicionado 100% horizontalmente, es decir, todo a la derecha. También vamos a agregar un color y una imagen de fondo diferente a este contenedor.

Revisa de nuevo tu sitio y empieza por desplazarte hacia abajo. Cuando encuentres el final del primer contenedor deberías empezar a ver el segundo venir, desapareciendo la primer imagen en la parte superior y revelando poco a poco la segunda.

3. Agrega un Separador

Sería mejor el efecto de esta técnica si agregamos un separador entre los dos contenedores, así que lo vamos añadir ahora.

En medio de los dos div contenedores agrega este HTML:

Y agrega la clase .separator a tu hoja de estilos:

Cuando actualices tu sitio ahora deberías tener un lindo separador entre tus contenedores:

4. Tercer y Cuarto Contenedor

Ahora puedes introducir el siguiente código para agregar más separadores y contenedores.

Añade este HTML después de los divs creados anteriormente:

Agrega este CSS a tu hoja de estilos:

Ahora deberías ver en tu pantalla el tercer y cuarto contenedor mostrándose:

Y para rematar, un separador final:

5. Haz que el diseño sea Adaptable

La última cosa que necesitarás hacer será adaptar el sitio a los distintos tamaños de pantalla. Cuando la vista se vuelva demasiado pequeña para mostrar cómodamente nuestras imagenes las acomodaremos para que se muestren en linea una después de la otra.

En la parte superior de tus contenedores, dentro de los div de apertura y por encima del texto, agrega un elemento figure con la clase .smallscreen y dentro de ese elemento agrega una etiqueta img para mostrar cada una de las imágenes que se usan actualmente:

Contenido del Primer Contenedor:

Contenido del Segundo Contenedor:

Contenido del Tercer Contenedor:

Contenido del Cuarto Contenedor:

Vamos a usar la clase .smallscreen para ocultar esta imagen por defecto, pero para mostrarla cuando se visualice en un tamaño pequeño de pantalla.

Agrega la siguiente clase a tu hoja de estilos:

Bien, ahora agregaremos media queries que se encargarán de mostrar las imágenes de fondo en su totalidad o no. También escalarán progresivamente el tamaño y espacio del texto en el diseño y así podremos acomodar todos los elementos al ancho de la página.

Agrega éstas media queries a tu hoja de estilos:

Las primeras cuatro media queries simplemente reducen el tamaño de fuente del texto y el padding dentro del contenido y el contenedor, de manera progresiva para así adaptarse al ancho de pantalla disponible.

En la quinta media query de max-width: 50rem incluimos código que hace visible la clase .smallscreen, remueve nuestro 50% de padding del contenido y el contenedor, y oculta las imágenes de fondo. Cuando esta media query se active no veremos más imágenes de fondo fijas, en su lugar vamos a ver imágenes normales en la parte superior de cada contenedor.

Ahora, cuando actualices tu sitio se debería ver sin problemas al momento de reducir la anchura de la vista, hasta que vea su tamaño más pequeño:

Conclusión

Incluso después de muchos años trabajando con CSS no dejo de sorprenderme por el gran número de cosas increibles que puedes hacer con él. Y cuando más simple es la técnica más impresionante el resultado.

Prueba esta pequeña joya, ¡Es tan rápido y fácil que probablemente quedarás enganchado!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.