¡Hola a todos! 👋 En esta práctica, quise llevar mis habilidades de desarrollo web al siguiente nivel creando un efecto parallax en una sección hero, un estilo de animación que ahora integro en muchos de mis proyectos.
Para este video, utilicé HTML, CSS y JavaScript junto con dos librerías increíblemente poderosas: GSAP y ScrollTrigger. Con ellas, logré que los elementos se movieran de manera fluida a medida que el usuario hace scroll, creando una experiencia visual inmersiva.
Les dejo los recursos que utilice en el video:
📍Tipografía: ‘Poppins’ https://fonts.google.com/specimen/Pop…
📍Iconos: Font Awesome https://cdnjs.com/libraries/font-awesome
📍GSAP: incluyendo el ScrollTrigger https://gsap.com/docs/v3/Installation
📍Lenis.js: https://github.com/darkroomengineering/lenis/blob/main/README.md
📍Recursos Bases: https://github.com/fernando5498/Websi… También se pueden descargarlo con el botón de Recursos del video ☝🏻.
En este tutorial verás:
- Cómo estructurar el código HTML y CSS para un efecto de capas.
- Como integrar GSAP para animaciones.
- Cómo usar ScrollTrigger para activar animaciones al hacer scroll.
- Como integramos la librería de Lenis.js para el scroll.
- Un vistazo a mi proceso de diseño web y codificación para que te inspires.
Espero que este video te sea de gran ayuda y te motive a experimentar con este tipo de animaciones en tus propios proyectos.
