Creé un sitio web interactivo para la Liga de críquet recreativa de Nueva York que incluye:

Secciones de desplazamiento horizontal: Se utilizaron GSAP y ScrollTrigger para crear un efecto de desplazamiento horizontal suave.
Escena 3D: integró un modelo de pelota de cricket en 3D usando React Three Fiber para agregar un atractivo visual dinámico.
Diseño interactivo: Implementamos un diseño responsivo para garantizar una experiencia perfecta en diferentes dispositivos.
El objetivo era combinar animaciones interactivas y gráficos 3D modernos para crear una experiencia visualmente atractiva para los usuarios interesados ​​en la liga de cricket.

Manifestación
Vea la demostración en vivo del proyecto aquí: Live Demo
Vea la demostración en vivo del proyecto aquí: Live Demo
Alternativamente, vea el código en GitHub: Repositorio de GitHub

Diseño y planificación:

Definí los requisitos del proyecto y esbocé el diseño y las interacciones.
Elija GSAP para animaciones de desplazamiento horizontal y React Three Fiber para la escena 3D.

Implementación:

Configura el proyecto con Next.js y Tailwind CSS.
Creé secciones de desplazamiento horizontal usando GSAP y ScrollTrigger.
Se agregó un modelo de pelota de cricket en 3D que gira y escala según el progreso del desplazamiento.
Diseño responsivo garantizado y rendimiento fluido en diferentes dispositivos.
Desafíos y soluciones:

Desafío: Sincronizar la escena 3D con el progreso del desplazamiento.

Solución: calculó la posición y la escala de la bola según la posición de desplazamiento, utilizando una trayectoria curva para un movimiento suave.
Desafío: garantizar un desplazamiento horizontal fluido con diferentes tamaños de pantalla.

Solución: Se utilizaron activadores de desplazamiento y tamaño flexibles para adaptarse a varias dimensiones de la ventana gráfica.
Aprendizajes:

Mejoré mis habilidades para integrar GSAP con React para animaciones.
Obtuve experiencia práctica con renderizado 3D usando React Three Fiber.
Aprendí a manejar animaciones e interacciones complejas en un diseño responsivo.
Próximos pasos:

Mejora la escena 3D con elementos interactivos adicionales.
Optimice el rendimiento para lograr un desplazamiento y animaciones aún más fluidos.
Agregue más contenido y funciones para atraer aún más a los usuarios.
Miembros del equipo

Este proyecto fue desarrollado por: banerjeeprodipta