Crea una imagen de paralaje interactivo

Sep 16, 2025

Cómo

Desplazamiento de paralaje ya no es la capturadora de atención garantizada que solía ser, pero hay otras formas de usar técnicas de paralaje para involucrar a sus visitantes y mejorar su experiencia de usuario .

Echa un vistazo a Sitio del señor Fisk , diseñada por Bmo , y notará un tipo diferente de paralaje en marcha: su imagen principal de colores brillantes se mueve en 3D, en respuesta a los movimientos del mouse.

5 consejos para CSS super rápido

Es un efecto impresionante que no es demasiado difícil de implementar; Simplemente siga estos pasos para darle a su sitio un sentido de profundidad llamativo.

Crea tu propio sitio llamativo con el perfecto. Alojamiento web servicio y Creador de sitios web herramienta. Y, a lo largo del camino, guarde sus archivos de diseño en los mejores almacenamiento en la nube .

01. Iniciar HTML

El primer paso es definir el documento HTML, que consiste en el contenedor HTML para almacenar las secciones de la cabeza y el cuerpo. Si bien la sección de la cabeza es principalmente responsable de cargar los recursos externos de CSS y JavaScript, la sección del cuerpo almacenará los elementos de contenido que se crearán en el Paso 02.

 & lt;! DOCTYPE HTML & GT;
& lt; html & gt;
& lt; cabeza y gt;
& lt; title & gt; raton Scroll & 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. Elementos de contenido

La técnica permitirá cualquier contenedor de contenido utilizando el atributo Data-Parallax para mostrar el efecto. Cada elemento secundario de primer nivel se mostrará con la presentación de Paralaje. Este ejemplo establece tres capas infantiles para el paralaje, pero puede agregar más si lo desea. También puede agregar contenido a estas capas, como texto o imágenes; PNG o SVG con transparencia funcionarán mejor.

 & lt; Datos del artículo-Parallax & GT;
  & lt; DIV & GT; & LT; / DIV & GT;
  & lt; DIV & GT; & LT; / DIV & GT;
  & lt; DIV & GT; & LT; / DIV & GT;
& lt; / Artículo & gt;

03. Estilo de contenedor de paralaje

Cree un nuevo archivo llamado 'Styles.css'. El primer conjunto de reglas en este archivo establece el tamaño predeterminado del contenedor de paralaje y su modo de posición. Es importante usar el posicionamiento relativo para que los elementos del niño puedan colocarse en relación a donde se encuentre el contenedor. El ancho y la altura están configurados para cubrir la pantalla completa para permitir la máxima interactividad.

 [Data-parallax] {
  Posición: Relativo;
  Ancho: 100VW;
  Altura: 100vh;
}

04. Paralaje de los niños

Cada uno de los elementos de primer nivel dentro del contenedor de datos-paralaje de datos se dimensiona y se coloca para aparecer de forma centralizada. Junto con los padres de posicionamiento relativo, el porcentaje se usa como la unidad de medición, que permite colocar el tamaño y posicionamiento en relación con el contenedor de paralaje. Para este ejemplo, se usa un fondo rojo transparente para demostrar el efecto: puede reemplazar esto con PNG o la imagen SVG de su elección con @Background: URL ("Su imagen aquí").

 [Data-Parallax] & GT; * {
  Posición: Absoluto;
  Ancho: 50%;
  Altura: 50%;
  izquierda: 25%;
  Top: 25%;
  Frontera: 1px sólido # 000;
  Fondo: RGBA (255,0,0,0, .25)
}

05. Iniciar el JavaScript.

Cree un nuevo archivo llamado 'Code.js'. JavaScript se utilizará para controlar las respuestas a las interacciones del mouse del usuario. No queremos que el JavaScript ejecute alguno del código JavaScript hasta que la página se haya cargado completamente, de ahí el código para los pasos 06 y 07, colocando una función activada por el evento de carga, que se activa cuando la ventana ha completado la carga.

 window.addeventlistener ("carga", función () {
  *** Paso 6 aquí
});

06. Búsqueda de nodos

La primera actividad de JavaScript para ejecutarse inmediatamente después de que la página esté lista es encontrar todas las capas de paralaje. En primer lugar, se encuentran los contenedores de paralaje, seguidos por sus hijos. Cada niño tiene un número de índice aplicado a ellos bajo el atributo 'Índice de datos'.

 AR Nodes = Document.QuerySelectorall ("[Data-Parallax]");
para (var i = 0; i & lt; nodes.length; i ++) {
  var niños = nodos [i] .children;
  para (var n = 0; n & lt; niños.length; n ++) {
  niños [n] .setattribute ("Índice de datos", N + 2);
  }
  *** Paso 7 aquí
}

07. Los oyentes de paralaje

El paso final es aplicar un escuchador de eventos para cualquier movimiento del mouse que se presenta sobre el contenedor de paralaje. Cualquier acción de este tipo desencadena una función para calcular las nuevas posiciones de las capas de paralaje basadas en la posición del mouse y el atributo de índice de datos definido en el Paso 06, lo que resulta en cada actualización de la actualización en diferentes pasos. El resultado de cada cálculo se aplica a las capas a través del atributo de estilo.

 Nodos [I] .addeventlistener ("mousemove", función (e) {
  var alms = esto.children;
  para (var c = 0; c & lt; elms.length; C ++) {
  var divisor = Parsint (elms [c] .getattribute ("índice de datos"));
  var startx = este.offsetwidth / 4;
  var stingy = esta.offsetheight / 8;
  Elms [C] .style.left = startx - (((e.screenx / divisor) -e.clientx) / 3) + "px";
  ELMS [C] .style.top = Starty - (((E.Screeny / Divisor) -e.clienty) / 3) + "px";
  }
});

Este artículo se publicó originalmente en número 272 de la revista Creative Web Design Design Diseñador web . Comprar emisión 272 aquí o Suscríbete al diseñador web aquí .

Artículos relacionados:

Animar svg con javascript
Crea efectos líquidos con WebGL.
10 maneras de evitar problemas de compatibilidad de navegación cruzada

Crea una imagen de paralaje interactivo

01. Iniciar HTML

02. Elementos de contenido

03. Estilo de contenedor de paralaje

04. Paralaje de los niños

05. Iniciar el JavaScript.

06. Búsqueda de nodos

07. Los oyentes de paralaje

Cómo - Artículos más populares

PORREREF: Cómo usar la herramienta de referencia de la imagen

¿Qué hay dentro de 8?

Cómo crear pasto 3D

Mantenga el control de la versión perfecta con abstracto

5 cosas que no sabías que podrías hacer con HTML

Cómo hacer deliciosas texturas con lápices

Pinte como un impresionista

Crea marcos de estilo en Photoshop

Categorías