Info
Aprende los fundamentos de la animación web, incluyendo los conceptos básicos de CSS como selectores, propiedades y valores, y descubre cómo usarlos para crear animaciones y transiciones fluidas.
¿Qué vas a aprender?
Disfruta de la animación web de forma fácil
A través de este curso, aprenderás los fundamentos de la animación web: los conceptos básicos de CSS como selectores, propiedades y valores, y, además, cómo usarlos para crear animaciones y transiciones fluidas.
También aprenderás a crear animaciones utilizando keyframes, animaciones de transición, animaciones basadas en eventos y efectos especiales..
Para quién es
Es recomendable que, para aprovechar este curso, tengas un conocimiento básico de HTML y CSS.
Deberías estar familiarizados con la estructura básica de una página web, incluyendo la estructura de etiquetas HTML y la forma en que se utilizan las hojas de estilo CSS para dar estilo a una página.
Herramientas que verás en el curso
- Cuenta en Github: es una plataforma de alojamiento de código fuente y desarrollo colaborativo.
- Cuenta en Codesandbox: es una plataforma de desarrollo en línea que permite a los usuarios crear, compartir y colaborar en proyectos de código
- Editores de código: Herramientas como Visual Studio Code para escribir y probar código.
- Navegadores web: Uso de navegadores como Chrome, Firefox y Safari para probar y depurar animaciones.
- Greensock (GSAP): Una librería de JavaScript para crear animaciones avanzadas.
- Herramientas de diseño: Figma para diseñar y planificar las animaciones.
- DevTools: Herramientas de desarrollo integradas en los navegadores para depurar y optimizar las animaciones.
Proyecto final
Realizarás un proyecto que integre los conocimientos adquiridos. Incluirá la implementación de la técnica de scrollytelling en una landing page, animando secciones conforme el usuario se desplaza por la página.
Diseño y estructura de la landing page: Decidirás la estructura, el contenido y el diseño básico de la landing page. También realizarás la implementación de animaciones básicas: Aplicarás las técnicas aprendidas en las primeras sesiones para animar elementos básicos de la página.
Y, por último, implementarás animaciones avanzadas : Integrar animaciones más complejas, como las basadas en scrollytelling y animaciones SVG.