Crea un efecto de fondo de paralaje controlado por ratón

Sep 12, 2025

Cómo

[dieciséis] (Crédito de la imagen: Renaud Rohlinger)

Los sitios con desplazamiento de paralaje continúan siendo populares por una razón: crean una experiencia de navegación agradable y atractiva para el usuario. Ya hemos visto el mejor impresionante. Desplazamiento de paralaje Sitios web para inspirarte, pero ¿qué haces si quieres hacer uno propio?

Afortunadamente, el desarrollador creativo francés Renaud Rohlinger está aquí para mostrarle las cuerdas de cómo crear un fondo de desplazamiento de paralaje que pueda controlar con el mouse. Echa un vistazo a los increíbles resultados en su sitio y luego aprenda de Rohlinger a continuación sobre cómo puede replicar el efecto en su próximo proyecto.

También podrías probar uno de estos Constructores de sitios web , y mientras está considerando el rendimiento de su sitio, revise su Alojamiento web El servicio está trabajando para usted. ¿Tienes un sitio pesado de medios? Copia de seguridad con confiable almacenamiento en la nube .

01. Definir el marco de documentos HTML

El primer paso es definir el marco del documento HTML. Consiste en el contenedor HTML que describe el documento que tiene secciones para la cabeza y el cuerpo. Mientras que la sección de la cabeza vincula los archivos externos JavaScript y CSS, la sección del cuerpo se usa para definir los elementos de contenido de la página en el Paso 2.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; cabeza y gt;
& lt; title & gt; parallax fondo & lt; / title & gt;
& lt; link rel = "stylesheet" tipo = "texto / css"
href = "styles.csss" / & gt;
& lt; script src = "code.js" & gt; / lt; / script & gt;
& lt; / cabeza y gt;
& lt; cuerpo y gt;
   *** Paso 2 aquí
& lt; / body & gt;
& lt; / html & gt;

02. Identificar el contenido HTML

El contenido del cuerpo consiste en el texto de la pantalla y un contenedor DIV usando el datos-paralajex atributo. Es este elemento de contenedor que se utilizará para el fondo de Paralaje, con cada uno de sus elementos secundarios que se diseñarán con las imágenes de fondo requeridas. En este ejemplo, el contenedor tiene tres capas de imagen que se crearán desde los elementos DIV infantil.

 & lt; H1 & GT; Hola! & Lt; / H1 & GT;
& lt; DIV Data-Parallax & GT;
   & lt; DIV & GT; & LT; / DIV & GT;
   & lt; DIV & GT; & LT; / DIV & GT;
   & lt; DIV & GT; & LT; / DIV & GT;
& lt; / DIV & GT;

03. Crea un contenedor de CSS Parallax

Crea un nuevo archivo llamado Styles.css . El primer paso en este archivo establece el color de contenido predeterminado para ser blanco y la configuración del contenedor de fondo de paralaje. El posicionamiento fijo se aplica al contenedor de paralaje para permitir que permanezca en la misma posición a medida que el contenido se desplaza sobre él. Se aplica un color predeterminado como el color de la página, mientras que un índice Z negativo permite que el contenedor aparezca en el contenido de la página.

 HTML, CUERPO {
   Color: #fff;
}
[Data-parallax] {
   Posición: fijo;
   Ancho: 100VW;
   Altura: 100vh;
   TOP: 0;
   izquierda: 0;
   z-index: -1;
   Color de fondo: # 000;
}

04. Configurar CSS Parallax Capas

Cada una de las capas de imagen se configura para usar el posicionamiento absoluto con un tamaño para que coincida con la ventana del navegador. La imagen de paralaje en este ejemplo se basará en un patrón de tamaño específico que se configura para repetir. Puede optar por repetir solo la imagen verticalmente usando Repetir-Y, u horizontalmente usando Repet-X.

 [Data-Parallax] & GT; * {
   Posición: Absoluto;
   Ancho: 100VW;
   Altura: 100vh;
   Repetición de fondo: repetir;
   Tamaño de fondo: 20VW 20VW;
}

05. Use capas de fondo CSS

Si bien cada una de las capas de imagen comparte la configuración de posición y tamaño definidas en el Paso 4, cada capa usa una imagen única. El selector NTH-hijo se usa para hacer referencia a cada elemento individual dentro del contenedor de paralaje. El atributo de imagen de fondo se utiliza para dibujar dos líneas que crean un efecto de cuadrícula cuando se balancea. Las capas más bajas usan colores más oscuros para ayudar a proporcionar una percepción de la profundidad.

 [Data-Parallax] & GT; *: nth-niño (1) {
   imagen de fondo:
      degradado lineal (a la derecha, # 333 1px,
  1px transparente),
      Degradado lineal (a fondo, # 333 1px,
  1px transparente);
}
[Data-Parallax] & GT; *: nth-niño (2) {
   imagen de fondo:
      degradado lineal (a la derecha, # 777 1px,
1px transparente),
      Degradado lineal (a fondo, # 777 1px,
1px transparente);
}
[Data-Parallax] & GT; *: nth-niño (3) {
   imagen de fondo
      degradado lineal (a la derecha, #fff,
1px transparente),
      Degradado lineal (a fondo, #fff 1px,
 1px transparente);
}

06. Realizar la iniciación de la capa JavaScript

Crea un nuevo archivo llamado Code.js . Este paso encuentra el contenedor de paralaje e inicia cada una de sus capas de imagen con el índice de datos Atributo que se utilizará en el paso 7. Esto debe realizarse a partir de una función conectada al evento de carga de la ventana del navegador, de modo que el código solo se ejecute cuando el contenido del cuerpo de la página esté listo.

 ventana.addeventlistener ("carga", función () {
   VAR contenedor = documento.
QuerySelector ("[DATA-PARALAX]");
   var childnodes = contenedor.children;
   para (var n = 0; n & lt; childnodes.length; n ++) {
      Nodos infantiles [n] .setattribute ("Índice de datos", N + 1);
   }
   **** Paso 7 aquí
});

07. Calcular el movimiento del mouse JavaScript

El efecto se basa en mover las imágenes asociadas con cada capa de paralaje en respuesta al movimiento del mouse. El contenedor de paralaje identificado en el Paso 6 tiene un movimiento del ratón Ayector de eventos adjunto, que desencadena una función para reposicionar imágenes de fondo de las capas de paralaje siempre que haya movimiento del mouse. Cada capa tiene un cálculo de movimiento basado en el número de índice aplicado en el Paso 6.

 contenedor.addeventlistener ("mousemove",
 función (e) {
   var alms = esto.children;
   para (var c = 0; c & lt; elms.length; C ++) {
      var movimiento = parseint (elms [c].
getAttribute ("Índice de datos")) / 10;
      var x = ((e.clientx) * movimiento) + "px";
      var y = ((e.clienty) * movimiento) + "px"; ELMS [C] .style.backgroundposition = x +
"" + y;
   }
});

Este artículo fue publicado originalmente en Creative Web Design Magazine Diseñador web . Compra el número 290 ahora.

Artículos relacionados:

10 mejores marcos de CSS en 2019
Cómo agregar animación a SVG con CSS
52 herramientas de diseño web para ayudarlo a trabajar más inteligentemente en 2019

Crea un efecto de fondo de paralaje controlado por ratón

01. Definir el marco de documentos HTML

02. Identificar el contenido HTML

03. Crea un contenedor de CSS Parallax

04. Configurar CSS Parallax Capas

05. Use capas de fondo CSS

06. Realizar la iniciación de la capa JavaScript

07. Calcular el movimiento del mouse JavaScript

Cómo - Artículos más populares

Adobe XD: Cómo usar la función Auto-Animate

Gestiona el estado del formulario de reacción con Formik

Cómo dibujar una rosa: consejos para principiantes y avanzados

Recrear un clásico manga

Crea y anima los polígonos SVG

Agregue un efecto de fallo a su sitio web

Construye un sitio de comercio electrónico desde cero

Cómo codificar un marcador de realidad aumentada

Categorías