HTML5 práctico: Scroll

Titulo original:

HTML5 práctico: Scroll y presentación de contenidos.

Nivel de la aptitud:

Intermedio.

Modulos | Videos:

3 | 35.

Duracion:

3h 3m.

Los efectos de scroll aplicados sobre páginas HTML5 son útiles debido a la necesidad de facilitar la navegación a los usuarios de dispositivos móviles que entran en nuestro microsites. Pero en vez de ser una limitación, el uso de estructuras verticales ha servido para añadir atractivo a nuestras páginas gracias a la combinación de animaciones de distinto tipo, e incluso a aportarles información. En este curso aprenderás a crear este tipo de efectos en tres ejemplos basados en JavaScript y CSS, que van a empezar con un ejemplo simple de parallax, para terminar con otro un poco más complejo y así abarcar las distintas opciones de efectos de scroll que podemos añadir a nuestros front-ends.

• Introducción
  • Presentación del curso “HTML5 práctico: Scroll y presentación de contenidos”.
• 1. Efectos parallax simples para contenidos single page
  • 1.1. Por qué crear animaciones para webs usando scroll.
  • 1.2. Diferentes librerías para crear efectos parallax.
  • 1.3. Estructura del HTML para implementar efectos parallax.
  • 1.4. Maquetación de los contenidos con CSS.
  • 1.5. Aplicando estilos de diseño con CSS.
  • 1.6. Aplicando parallax a los contenidos.
  • 1.7. Elementos fijos en combinación con elementos móviles.
  • 1.8. Preparando la página para su visualizacion en versión móvil.
• 2. Combinación de animación horizontal y vertical
  • 2.1. Descripción básica del proyecto de navegación.
  • 2.2. AngularJS para el control de la estructura del proyecto.
  • 2.3. Estructura del HTML principal.
  • 2.4. Maquetación de los contenidos principales.
  • 2.5. Generación del menú de contenidos.
  • 2.6. Formateo de la portada.
  • 2.7. Integración de AngularJS en la aplicación web.
  • 2.8. Estructura de los contenidos del nivel secundario.
  • 2.9. Animaciones horizontales en el segundo nivel de contenidos.
  • 2.10. Mejora de los contenidos secundarios.
  • 2.11. Aplicación del sistema de animación vertical.
  • 2.12. Ajustes finales en la app de animación horizontal y vertical.
  • 2.13. Modificaciones para dispositivos móviles.
• 3. Técnicas de control avanzado de contenidos mediante el scroll
  • 3.1. Descripción del proyecto de scroll.
  • 3.2. La librería ScrollMagic.
  • 3.3. Estructura del HTML de nuestra aplicación de scroll.
  • 3.4. Estilos básicos para la estructura de la aplicación.
  • 3.5. Escena del establo.
  • 3.6. Escena del huevo.
  • 3.7. Recuperación de información del scroll.
  • 3.8. Escena del pollo rompiendo el huevo.
  • 3.9. Escena del pollo caminando.
  • 3.10. Escena de los carteles.
  • 3.11. Escena de la gallina y cambio de color del final.
  • 3.12. Aplicando un callback.
  • 3.13. Finalización del contenido para dispositivos móviles.

Referencia

HTML5 práctico: Scroll y presentación de contenidos | Referenci | DESCARGA |