Efecto de "desplazamiento de paralaje" basado en Vue en la página de detalles del centro comercial

Primero, comprendamos qué significa el desplazamiento de paralaje. El desplazamiento de paralaje es el efecto de hacer que varias capas de fondo se muevan a diferentes velocidades. Puede que este no sea un buen término, pero podemos entenderlo intuitivamente mirando esta URL.

Cuando nos desplazamos lentamente por la página, encontraremos que la velocidad de desplazamiento de la imagen principal del producto y los detalles del producto no es la misma. Los detalles del producto se desplazan a velocidad normal, pero la imagen principal del producto se desplaza más rápido que los detalles del producto y la imagen principal del producto se desplaza más rápido que los detalles del producto. La imagen principal del producto se desplaza a velocidad normal, pero los detalles del producto se desplazan dos veces más rápido, creando un efecto de paralaje. También puede consultar el gráfico que publiqué a continuación:

Tal vez no pueda verlo visualmente en el gráfico, por lo que le recomendamos que haga clic en la URL de arriba para verlo visualmente.

Desplazamiento visual: haz que varios fondos se muevan a diferentes velocidades

1. Necesitas al menos dos capas de fondo (área de movimiento lento y área de movimiento normal)

2. Establezca el fondo en un diseño relativo (el área de movimiento lento se establece en la parte superior para amortiguar el desplazamiento)

3. Supervise el deslizamiento del componente de paralaje y calcule la parte superior del área de movimiento lento según en el valor de la diapositiva.

Para aclarar, las áreas de movimiento lento utilizan el diseño relativo y la parte superior para compensar la distancia creada por el desplazamiento normal. Sin más, vayamos al grano.

Teniendo en cuenta que podemos usar este efecto en varios lugares, lo encapsulamos como un componente y lo reutilizamos a través de vue slots. Por supuesto, aquí asumimos que comprende mejor vue.

En la plantilla, usamos dos ranuras para aceptar el contenido del área de movimiento lento y del área de movimiento normal, y escuchamos el evento de desplazamiento de .parallax para determinar la distancia del área de movimiento lento. área desde arriba. Luego vinculamos la propiedad :style="{top: slowTop}" con .parallax-slow para determinar qué tan lejos de la parte superior está el área cuando se desplaza.

Cabe señalar que .parallax debe agregar posición: absoluta; o posición: fija; de lo contrario, su evento de desplazamiento no funcionará. Por motivos específicos, puede consultar el artículo relacionado con CSS, por lo que no entraré en detalles aquí.

Además, para áreas de movimiento lento y áreas de movimiento normal, es muy importante establecer la posición: relativa.

El comportamiento de este componente es calcular la distancia desde la parte superior del área que se mueve lentamente, y todo el trabajo gira en torno a esta lógica.

Utilizamos el componente de paralaje en el componente de vista (página de inicio).

En este punto, nuestro efecto ha sido implementado, entonces ¿por qué deberíamos usarlo? Personalmente creo que, por un lado, es el efecto y, por otro lado, es resaltar los elementos clave en la página. Por ejemplo, en la página de detalles del producto, la imagen principal del producto es definitivamente nuestro elemento clave. así que déjelo deslizarse más lento para mejorar la experiencia del usuario. Para atender a algunos estudiantes a quienes no les gusta leer artículos, publicaré el contenido del componente de paralaje.

Finalmente, gracias por leer y te deseo mucha suerte en tus estudios.