En esta entrada voy a explicar el contenido de la sección de historia.
Es el html más trabajado de todo el sitio, tanto por el contenido como por el dinamismo que implementa gracias a j-query. No quería presentar una serie de contenidos estáticos, así que decidí inventar un menú interactivo desde cero. Buscaba elementos desplegables y el hecho de poder manejarme en una interfaz que tuviera toda la información.
Así pensé en imágenes, que actuaran como enlaces y que mostraran cierta información al clikear sobre ellas.
Las instrucciones en j-query y j-query ui seguirían este algoritmo:
- oculta los desplegables de las fotos y los divs desplegables con toda la información.
-Al pasar por una foto localizamos el div del enlace y lo bajamos desde la parte superior de la imagen con .slideDown().
-Cuando me poso en el comentario la animación se detiene con .stop(). He detectado fallos en la implementación de mi idea, pero no he logrado solventarlos. Básicamente si entras en la imagen por el comentario j-query no entiende que estés en la foto y la animación se detiene antes de tiempo, dejando el comentario sin desplegar al completo.
-Cuando salimos de la foto realizamos un .sliderUp() para subir el comentario con el enlace y ocultarlo.
- Al pinchar en el link se crea un div "gigante" que ocupa toda la pantalla y es transparente y se despliega la información con el div desplegable correspondiente.
Ese div que ocupa toda la página tiene una utilidad especial, el objetivo que tiene es el de crear la ilusión de que, al pinchar fuera del div de información este se cierre directamente. Lo que está haciendo j-query es un .click() en ese div para decirle después:
- cierra la información.
- Borra el div grande.
Otro pequeño problema que puede tener este .js es que acumula las pasadas del ratón por las imágenes y si pasamos muchas veces, muy rápido, al salir de la foto veremos que los enlaces comienzan a vibrar hasta terminar la cuenta.
Ese es el funcionamiento de la parte de historia. Espero que la explicación haya sido clara y entretenida. Espero cualquier tipo de duda o consejo. Como decía, esta sección de 7 music!8 es la más trabajada y en la que he aprendido más sobre los metodos de j-query.
Atendiendo al contenido de la web las cuatro primeras imagenes hablan del la música cinematográfica y el cine sonoro. En la quinta encontrarás información sobre música en los videojuegos. La imagen final, una mujer en una tienda de discos, contiene una lista de recomedaciones extraídas de FilmAfinity.
