logoCoderhouse.png
Ë
By Facundo Farias • December 29, 2015

Tutorial: Tu año en retrospectiva

Termina el año y tenemos muchas cosas por las que festejar: nuevos proyectos y casos de éxito, premios o reconocimientos ganados, cursos terminados y tantos otros logros. ¿Qué mejor que hacerlo con nuestro propio micrositio del año en retrospectiva?

Seguramente conocés el "Year in Music" de Spotify, o los "Year in Review" de Vox Media, de Behance o de Mailchimp. Son páginas que muestran lo más destacado del año de una forma creativa y memorable.

Si querés despedir el 2015 celebrando tus logros, y recibir el nuevo año de la mejor manera, encuentra acá el tutorial con todo lo que necesitás para armar tu propio año en retrospectiva.

vox_year_review Vox Media - 2015 Year In Review

Estructura

Para que nuestro micrositio sea memorable tiene que contar una historia. Para lograrlo, un gran recurso es usar el scroll: a medida que avanzamos en nuestra página avanza nuestra historia.

Estos templates de Codyhouse nos van a servir de  base, e incluyen una colección de efectos y animaciones para resaltar aún más la experiencia.

  1. https://codyhouse.co/gem/page-scroll-effects/
  2. https://codyhouse.co/gem/fixed-background-effect/
  3. https://codyhouse.co/gem/alternate-fixed-scroll-backgrounds/

Los tres diseños son de calidad increíble y están listos para que, junto con tu contenido y creatividad, se conviertan en algo único.

Si querés total control sobre los efectos y animaciones, ScrollMagic es la librería indicada. Es un poco más compleja, pero tiene gran cantidad de ejemplos y muy buena documentación.

page-scroll-effects-featured Codyhouse - Page Scroll Efects

Imágenes

Para acompañar nuestro contenido, buenas imágenes y fotografías son esenciales. Si no tomamos nuestras propias fotos, encontrar imágenes puede ser difícil y costoso.

Estos tres bancos de imágenes se destacan por sus fotografías de excelente calidad, en alta resolución, y por ser de libre uso.

unspalsh_christmas Christmas - Unsplash

Efectos especiales

Una vez que tenemos nuestra estructura y contenido listos, agregar movimiento y animación nos va a ayudar a darle vida a nuestro micrositio.

Animate.css es una excelente librería para darle movimiento a nuestra página. Sólo basta con agregar una clase al elemento que queramos animar para conseguir el efecto.

Si lo que queremos es animar números, podemos usar este plugin para jQuery y conseguir un efecto similar al ejemplo de MailChimp.

Por último, podemos combinar estos dos recursos y recibir el 2016 con espíritu festivo: una cuenta regresiva con JavaScript para esperar el nuevo año, y este genial script de fuegos artificiales para festejar su llegada.

¡Hacé memorable tu 2015 con estos recursos, y compartilo! ¡Felices fiestas!