vinco/hecho-en-cdmx — pull request #11 by ramipaleo (2014-08-26 18:03:04+00:00)
Title: Transition is added to background

Tarea relacionada

Enviar 4 a 6 fotografías que podamos usar para páginas del sitio hechoencdmx

Problema

Agregar imágenes enviadas por el cliente, aplicando una transición con las mismas en el background.

Solución

Se crean capas con las clase .fullscreen-img que es la encargada de colocar la imagen como background, a esta también se anexan clases .item-n donde "n" es el número de elemento, estás ultimas clases ayudan a colocar diferentes imágenes como background.

Por cada clase .item-n se coloca la url de las imágenes que están hospedadas en flickr.

Usando css y jquery se crea el efecto de desvanecimiento como transición entre las imágenes, en el que tiempo entre cada transición es de 8 segundos. Para llevar esto acabo se crea una función init() en el archivo main.coffee dentro del controlador MainCtrly esta misma función es llamada con la directiva n-init en la vista main.html

Plan de pruebas

Compilar la aplicación con grunt serve para ver el correcto funcionamiento de la función para aplicar la transición de las imágenes.