¡Hoy vamos a aprender a crear una Transición Deslizante Personalizada en Webflow utilizando Swiper JS y GSAP! También aprenderás a implementar código personalizado utilizando codesandbox - ¡que recomiendo encarecidamente! Este es un tutorial para principiantes.
Si no estás familiarizado con Webflow, es un constructor de sitios web de arrastrar y soltar que te permite crear sitios web responsivos sin ningún tipo de codificación. Pero esta vez vamos a sobrecargar Webflow añadiendo un poco de código personalizado. Así que ¡manos a la obra! La Transición Deslizante es una forma estupenda de añadir un toque extra a tu sitio web. Puede ofrecer a los usuarios una experiencia interesante e interactiva que les mantendrá en la página más tiempo. Este tutorial en particular se centrará en cómo crear una interesante transición deslizante utilizando Swiper JS y GSAP.
¡Cuéntame si has aprendido algo hoy!
🚀 Echa un vistazo a Webflow:
(Enlace de afiliación para apoyar el Canal ❤️)
🧑🏾💻 Enlace al fragmento de código mencionado:
Aprenderás sobre:
👉 Animaciones Webflow
👉 Cómo crear un chasquido de desplazamiento vertical
👉 Cómo utilizar Swiper.js y GSAP
👉 Cómo utilizar Codesandbox
⏲️ Marcas de tiempo
00:00 - Introducción
00:35 - Visión general
01:20 - Estructura del Swiper
02:20 - Estructura de Webflow
09:07 - Implementa Codesandbox a tu proyecto Webflow
13:00 - Crea tu animación con Swiper y GSAP
19:03 - Cómo funciona GSAP
.jpg)
.jpg)
.jpg)