Crear un Sticky on Scroll Animation en Webflow - Tutorial para principiantes

Crear una Animación de Pegatina en Desplazamiento

Como desarrollador autónomo, a menudo me encuentro con retos de diseño que me obligan a pensar de forma creativa. Recientemente, me encargaron la creación de una animación sticky on scroll para el sitio web de un cliente. En esta entrada del blog, explicaré los pasos que seguí para crear este efecto y proporcionaré el código necesario para reproducirlo en tu propio sitio web.

Así que vamos a aprender Cómo Crear una Animación Sticky on Scroll utilizando Webflow. Aprenderás:

👉 Atajos de Webflow
👉 Elementos Adhesivos
👉 Animaciones de Desplazamiento en Webflow

Sugerencia: ¡Para crear un Elemento Adhesivo, no puedes establecer el elemento padre como oculto por desbordamiento!
Esto siempre me resultó un poco confuso, pero por eso suelo utilizar más Divs para ayudar.

Prepara la Sección Adhesiva

Vamos a construir una sección de 2 columnas para que una de ellas se desplace mientras la otra permanece fija.
Esto es muy útil si quieres enfatizar, dar una visión general o tal vez mostrar una imagen mientras el usuario puede desplazarse por el texto.

Para crear una animación sticky on scroll, el primer paso es configurar la estructura HTML. Una vez establecida la estructura, puedes utilizar CSS y JavaScript para crear el diseño y los efectos de animación deseados O hacerlo con Webflow :)

En mi caso, utilicé Webflow y una envoltura de cuadrícula a la envoltura de la página para ayudarme a organizar los elementos en la página, y luego añadí una envoltura y coloqué imágenes dentro de ella. Estilicé las imágenes con CSS para crear un efecto de pila y, a continuación, utilicé el Activador de interacción de Webflow para realizar un seguimiento de la posición de desplazamiento del usuario y aplicar una clase pegajosa a la envoltura cuando el usuario se desplaza más allá de un punto determinado. Esto hace que la envoltura y su contenido se adhieran a la parte superior de la pantalla mientras el resto de la página sigue desplazándose.

Es una sección muy fácil de crear con un gran impacto en la UX, tanto positivo como negativo. Así que no abuses de las secciones adhesivas en Webflow y asegúrate de tener siempre en mente al usuario mientras construyes tus sitios web.

En general, crear una animación sticky on scroll implica una combinación de HTML, CSS y JavaScript si lo haces desde cero. Siguiendo los pasos descritos en este vídeo, podrás crear un efecto similar para tu propio sitio web utilizando sólo Webflow.

Si aún no lo has hecho, asegúrate de suscribirte a mi boletín y recibirás contenido de calidad directamente en tu bandeja de entrada. Además, ¡recibirás 15 clonables gratuitos para Webflow que podrás copiar y pegar en tu próximo proyecto!


⏲️ Timestamps
00:00 - Intro
00:22 - Visión general
00:48 - Configuración de la estructura de la página
10:27 - Construye la animación de desplazamiento
17:39 - Resultado