lunes, 27 de junio de 2016

Curso Scroll y presentación de contenidos. Ejemplos prácticos con HTML5



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.


Efectos parallax simples para contenidos single page
Este ejercicio va a consistir en crear diferentes efectos de scroll en paralelo a lo largo de páginas estructuradas como single page. Crearemos un microsite con una navegación atractiva, y todo ello muy fácilmente.

    Por qué crear animaciones para webs usando scroll   02:17
    Diferentes librerías para crear efectos parallax   06:15
    Estructura del HTML para implementar efectos parallax   05:57
    Maquetación de los contenidos con CSS   07:28
    Aplicando estilos de diseño con CSS   06:25
    Aplicando parallax a los contenidos   06:45
    Elementos fijos en combinación con elementos móviles   07:23
    Preparando la página para su visualizacion en versión móvil   07:22

Combinación de animación horizontal y vertical
En muchos casos, la simple navegación vertical no es suficiente: En este ejercicio vamos a mezclar el uso del scroll con efectos parallax con la navegación horizontal para moverse entre apartados, y con ello tendremos todo un sistema complejo y atractivo de navegación.

    Descripción básica del proyecto de navegación   02:21
    AngularJS para el control de la estructura del proyecto   03:52
    Estructura del HTML principal   06:21
    Maquetación de los contenidos principales   04:57
    Generación del menú de contenidos.   08:03
    Formateo de la portada   02:58
    Integración de AngularJS en la aplicación web   05:03
    Estructura de los contenidos del nivel secundario   07:28
    Animaciones horizontales en el segundo nivel de contenidos   04:44
    Mejora de los contenidos secundarios   05:44
    Aplicación del sistema de animación vertical   08:37
    Ajustes finales en la app de animación horizontal y vertical   06:53
    Modificaciones para dispositivos móviles   04:39

Técnicas de control avanzado de contenidos mediante el scroll
Este capítulo va a servir como ejemplo de uso de un sistema de scroll creativo que, además de permitir ir accediendo a los contenidos, añade animación a la escena aportando así información visual a las imágenes y el texto.

    Descripción del proyecto de scroll   01:39
    La librería ScrollMagic   03:23
    Estructura del HTML de nuestra aplicación de scroll   04:18
    Estilos básicos para la estructura de la aplicación   05:08
    Escena del establo   08:16
    Escena del huevo   08:16
    Recuperación de información del scroll   03:34
    Escena del pollo rompiendo el huevo   08:01
    Escena del pollo caminando   05:03
    Escena de los carteles   04:10
    Escena de la gallina y cambio de color del final   03:33
    Aplicando un callback   02:17
    Finalización del contenido para dispositivos móviles   03:02

IMAGENES




Datos técnicos:
.MP4 | 720p
551.9 MB | Spanish
Formadores: Jorge González Villanueva
34 Videos (3:02 horas)
Software: CSS, CSS 3, HTML, HTML 5
Incl. Archivos Base
Fecha de publicación: 27-may-2016
Video2Brain


ENLACE DE DESCARGA


CONTRASEÑA: discoduroweb

0 comentarios

Publicar un comentario

¡Tu comentario es importante para mantener el blog!

Si quieres insertar una imagen usa este código:
[img]URL de la imagen[/img]

Si quieres insertar un video de YouTube o Vimeo usa este código:
[video]URL del video[/video]

No incluyas material para adultos, ni vulgar u ofensivo; tampoco contenido con odio, racismo o discriminación, de lo contrario tu comentario será eliminado.