Buenos días, después de un día festivo, aquí en España, os traigo un ejemplo de un acordeón, hecho con las trayectorias de desplazamiento. Utilicé 3 imágenes, de 3 deportistas famosos, en los cuales, al pinchar, sale una pequeña bio de cada uno de ellos, con un desplazamiento hacia la derecha de las imágenes.

El recurso del acordeón, puede ser muy útil a la hora de mostrar información. Para realizar esto, hay que crear varias trayectorias de desplazamiento, vamos a ir comentándolas una a una.

Ejemplo

La primera imagen (Luka Modric) tiene dos trayectorias de desplazamiento, una de ellas, larga hacia el lado derecho, que será la que accionaremos al pulsar sobre la imagen de Luka, la otra trayectoria, es una trayectoria falsa, que se queda en el sitio, que es la que accionaremos cuando el usuario pulsa en cualquiera de los otras dos imágenes. Al mismo tiempo que desplazamos su imagen, cambiamos el estado de su texto a normal, una vez que se termine la trayectoria de desplazamiento, y ponemos las otras dos cajas de texto en oculto, por si las visualizó previamente el usuario.

Segunda imagen, (Luis Suarez), tiene 3 trayectorias de desplazamiento, la que habrá que ejecutar cuando se pulsa su imagen, otra que es la trayectoria falsa, que se queda en su propio sitio, y una tercera que habrá que ejecutar cuando el usuario pulsa en la primera imagen. Igualmente, su texto se cambiará de estado a normal, y los otros dos en oculto.

La última imagen, (Michael Jordan), tiene dos trayectorias de desplazamiento, la suya propia, que ejecutaremos cuando pulsemos en su imagen, y otra que será la que ejecutaremos cuando pulsemos tanto la primera como la segunda imagen. Al igual que en las demás, mostraremos su texto y ocultaremos los otros dos textos.

Como veis, es algo complejo ya que hay que juntar varias trayectorias de desplazamiento, pero se puede hacer sin necesidad de variables, por si no te manejas bien con las variables.

Si queréis ver como funciona, pincha aquí.

Pincha en la imagen para descargar el fichero story.

Descarga fichero story

Espero os pueda resultar útil,