⚡
✌️
Crear un efecto de fijación
Nuestro objetivo es aplicar la fijación a dos objetos de modo que el primero se pegue inmediatamente al centro de la página, mientras que el segundo se congele en el momento en que toque al primero. Algo así:
1
Visión general de la configuración
FIJACIÓN
Establece el área de fijación del objeto. Se refiere al área de la pantalla (superior, central o inferior) con respecto a la cual se inicia el efecto de fijación. Tenga en cuenta que las formas del ejemplo están fijadas en el centro de la pantalla.
OFFSET DE DISPARO
Es el punto de partida de la fijación del objeto en relación con el ajuste seleccionado: Ventana Superior / Ventana Central / Ventana Inferior.
DISTANCIA
Se refiere a la distancia en píxeles que tiene que pasar el objeto en modo fijo.
Cómo crear el efecto
1
Configuración de los parámetros de los elementos
1. Añade un Zero Block a la página desde la biblioteca de bloques y dirígete a la configuración de bloques. Coloca 2 objetos en el espacio de trabajo, en vertical, uno detrás de otro.
2. Ajuste los objetos para que tengan la misma área de fijación - CENTRO DE LA VENTANA en nuestro caso. Ambos objetos permanecerán fijos en el centro de la pantalla.
3. Es mejor elegir el tamaño final de todos los elementos y la distancia entre ellos de una sola vez. El tamaño de cada elemento afectará a los parámetros de animación.
El tamaño de las formas es 100x100 px. La distancia entre ellas es de 300px. Distancia = Sangría del segundo objeto - Altura del primero
Sugerencia: si no tiene un objetivo de tamaño claro, utilice valores enteros o decimales al introducir el tamaño y el espaciado de un elemento para simplificar los cálculos.
2
Configuración de los parámetros de animación
1. Empecemos estableciendo el Desplazamiento del disparador / Punto de inicio de la animación.
El punto se cuenta en relación al área elegida, Centro de la ventana.
Empiece por el objeto superior, ya que así será más fácil calcular los puntos de inicio de la animación de las formas restantes. Su punto de inicio es 0px, lo que significa que el primer objeto se pegará exactamente en el centro de la pantalla.
El objeto inferior debe congelarse cuando toque al objeto superior. Esto significa que su punto de inicio de animación será inferior exactamente en la altura del primer objeto. Vamos a establecer la sangría aquí a 100px.
El punto se cuenta en relación al área elegida, Centro de la ventana.
Empiece por el objeto superior, ya que así será más fácil calcular los puntos de inicio de la animación de las formas restantes. Su punto de inicio es 0px, lo que significa que el primer objeto se pegará exactamente en el centro de la pantalla.
El objeto inferior debe congelarse cuando toque al objeto superior. Esto significa que su punto de inicio de animación será inferior exactamente en la altura del primer objeto. Vamos a establecer la sangría aquí a 100px.
2. Establezcamos la Distancia.
Esta es la distancia a la que debe pasar el objeto en modo fijo. Ajuste la configuración de la animación a partir del objeto inferior. Así será más fácil calcular la distancia de "pegado".
Esta es la distancia a la que debe pasar el objeto en modo fijo. Ajuste la configuración de la animación a partir del objeto inferior. Así será más fácil calcular la distancia de "pegado".
Cuadrado. Si vuelve a mirar el ejemplo, observará que el cuadrado no cubre ninguna distancia en el modo fijo: permanece congelado bajo el círculo. Eso significa que tenemos que establecer la distancia a 0px.
Círculo. El círculo recorre la distancia hasta el cuadrado en modo fijo. El efecto de fijación desaparece después de eso y ambas formas continúan desplazándose como de costumbre.
Esencialmente, el círculo tiene que llegar a la posición del cuadrado y detenerse más arriba para congelarse junto a él.
Eso significa 400px - 100px (altura del cuadrado) = 300px
Esencialmente, el círculo tiene que llegar a la posición del cuadrado y detenerse más arriba para congelarse junto a él.
Eso significa 400px - 100px (altura del cuadrado) = 300px
Guarde los ajustes y publique la página. Los cambios serán visibles en el modo de vista previa o después de publicar la página.
¿Te ha resultado útil esta guía para entender cómo funciona el efecto adhesivo?
