En este tutorial, echamos un vistazo a un hermoso efecto de desplazamiento de paralaje de la forma más sencilla, con fondos fijos y contenido de desplazamiento.

Descargar los archivos de origen Ver la demostración

Una breve introduccion

Parallax es un efecto en el que la posición de un objeto parece ser diferente cuando se ve desde diferentes posiciones. El movimiento de paralaje, o en nuestro caso, el desplazamiento de paralaje, nos da la ilusión de que dos objetos en la misma línea de visión, pero con distancia entre ellos, parecen moverse a diferentes velocidades. Si alguna vez ha mirado por la ventanilla de un automóvil mientras conduce a 100 km por hora por una autopista, notará que los postes de electricidad parecen pasar a gran velocidad, mientras que las montañas en el fondo parecen moverse muy lentamente. , casi parado. Esto es movimiento de paralaje en acción.

En lo que respecta a la web, podemos inducir un efecto de paralaje en los contenedores que tienen imágenes de fondo y texto encima de ellos. En su forma más simple, el desplazamiento de paralaje hará que el contenido se desplace normalmente y que el fondo permanezca estacionario. La belleza de esta técnica en su forma más simple es que solo requiere CSS. Vamos a profundizar en.

El marcado y la estructura

Si tenía un sitio fijo que no respondía, entonces no habría ningún truco para lograrlo. Sin embargo, estamos en la era del diseño web receptivo, por lo que es imposible. ¡No temáis! Tenemos un buen CSS a nuestra disposición. Pero primero, un vistazo a algunas marcas. El marcado es simple: tendremos sections alternas de texto de fondo/título y sections de contenido para obtener el máximo efecto. Esto es lo que parece:

  

    
Sereno
  



  

    
Lorem Ipsum Dolor
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  



  

    
Aumento
  



  

    
Lorem Ipsum Dolor
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  



  

    
Tranquilo
  



  

    
Lorem Ipsum Dolor
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  

Cada section con una clase de parallax contendrá nuestras imágenes de fondo y texto de encabezado, mientras que cada section con una clase de content serán secciones simples que contengan contenido. La clase de container es un div fluido con un ancho máximo, lo que hace que la capacidad de respuesta sea muy simple. Ahora, profundicemos en el CSS.

Diseñar y hacer que funcione con CSS

El primer punto a tener en cuenta es que todas mis imágenes de fondo tienen un width de 1600 px y una height de 600 px. Eso me permite configurar mis secciones de paralaje a una altura fija de 600 px. Sin embargo, hay un poco más que eso. Debido a que no quiero repetir fondos (estoy usando imágenes grandes y en negrita), no siempre puedo esperar que los usuarios tengan el ancho máximo (lo que permitirá que las imágenes de fondo estén a la vista). Afortunadamente para nosotros, podemos utilizar la propiedad CSS background-size y configurarla para que cover . Esto obliga a la imagen de fondo a ocupar el espacio total disponible al expandirlo proporcionalmente. Sin embargo, debe tener un prefijo para obtener el máximo soporte, así que tenga eso en cuenta.

Hasta aquí todo bien, excepto por lo más importante. Necesitamos que nuestra imagen de fondo permanezca fija en su lugar mientras nuestro contenido se desplaza más allá de ella. Una vez más, CSS nos facilita la vida. Utilizamos la propiedad background-attachment y la configuramos en fixed . ¡Sencillo! Así es como se ve mi CSS, con algunos ejemplos de consultas de medios:

 /* ================================================ ============
  ESTRUCTURA PRIMARIA
================================================== ========== */
.envase {
  ancho máximo: 960px;
  margen: 0 automático;
}
/* ================================================ ============
  SECCIONES
================================================== ========== */
sección.módulo:último hijo {
  margen inferior: 0;
}
sección.módulo h2 {
  margen inferior: 40px;
  familia de fuentes: "Roboto Slab", serif;
  tamaño de fuente: 30px;
}
sección.módulo p {
  margen inferior: 40px;
  tamaño de fuente: 16px;
  peso de fuente: 300;
}
section.module p:último hijo {
  margen inferior: 0;
}
sección.módulo.contenido {
  relleno: 40px 0;
}
sección.módulo.paralaje {
  altura: 600px;
  posición de fondo: 50% 50%;
  repetición de fondo: sin repetición;
  archivo adjunto de fondo: fijo;
  tamaño de fondo: portada;
}
sección.módulo.paralaje h1 {
  color: rgba (255, 255, 255, 0,8);
  tamaño de fuente: 48px;
  altura de línea: 600px;
  peso de fuente: 700;
  alineación de texto: centro;
  transformación de texto: mayúsculas;
  sombra de texto: 0 0 10px rgba(0, 0, 0, 0.2);
}
sección.módulo.parallax-1 {
  imagen de fondo: url("../img/demo/_small/1.jpg");
}
sección.módulo.parallax-2 {
  imagen de fondo: url("../img/demo/_small/2.jpg");
}
sección.módulo.parallax-3 {
  imagen de fondo: url("../img/demo/_small/3.jpg");
}

@media todos y (ancho mínimo: 600 px) {
  sección.módulo h2 {
    tamaño de fuente: 42px;
  }
  sección.módulo p {
    tamaño de fuente: 20px;
  }
  sección.módulo.paralaje h1 {
    tamaño de fuente: 96px;
  }
}
@media todos y (ancho mínimo: 960 px) {
  sección.módulo.paralaje h1 {
    tamaño de fuente: 160px;
  }
}

Compatibilidad con el navegador e información de propiedades

El soporte del navegador en general es realmente bueno. IE8 y anteriores no admitirán la propiedad background-size , pero un estilo condicional simple debería encargarse de eso. Aparte de eso, todo es compatible y no deberías tener ningún problema. Para obtener más información sobre las propiedades CSS utilizadas en este tutorial, consulte el MDN:

• Posición de fondo : referencia de MDN
• Tamaño de fondo : referencia de MDN
• Archivo adjunto de antecedentes : referencia de MDN

Envolver

Aquí, hemos implementado algo que es simple, efectivo y un poco diferente del aspecto ordinario de todo el desplazamiento a la vez. Utilizamos algunas técnicas CSS agradables pero menos conocidas para lograr el efecto deseado. ¡Y eso es una envoltura! No olvide que puede ver la demostración y descargar la fuente haciendo clic en los enlaces a continuación, y si tiene preguntas, comentarios o comentarios, también puede dejarlos a continuación.