Como se ha hecho esto?
2 seguidores
Muy buenas personal!
He observado en la web del ayuntamiento de barcelona, un efecto que me crea mucha curiosidad.
http://governobert.bcn.cat/ca/transparencia/consell-municipal/2015
Estoy realizando una web, y me gustaria saber como se ha realizado este efecto, de clickar a un cuadrado de una imagen y que al lado se abra la ficha.
Si alguien puede ayudarme, se lo agradeceré muchísimo!
lmbr
Hola Rodi's.
Aunque me gustaría darte una respuesta fácil no es tan sencillo, pero te puedo dar unas orientaciones.
El efecto de los sillones es muy sencillo, sólo tienes que aplicarle una transformación css de rotación y luego un cambio en la clase en el evento hover.
El efecto de la ficha se consigue aplicando cambios css a etiquetas div de forma dinámica mediante jquery.
Por ejemplo si tienes una etiqueta div con un id llamado ficha sólo tienes que hacer:
$("#ficha").css("background-color", "black");
en el evento que quieras y cambiará el color de fondo.
Para cargar los datos en las fichas lo puedes hacer de varias formas. Por ejemplo puedes tener una sola div con la ficha del concejal y ocultarla al inicio . Cuando se hace clic en su asiento, mediante jquery aplicas el efecto de desplazamiento y la carga dinámica de la persona.
La carga de datos puede ser mediante ajax o simplemente asociar datos precargados.
Los efectos los puedes hacer como digo mediante jquery y css, por ejemplo,
transform: rotateY(90deg)
o usando algún plugin de jquery.Por ejemplo http://oridomi.com/
En http://plugins.jquery.com/tag/animation/ tienes muchos donde inspirarte.
También puedes ver este en concreto que permite transformar vectores svg http://keith-wood.name/svg.html pulsa en la pestaña examples y observa lo que se puede hacer.
La verdad es que hay plugins para hacer eso que quieres y más pero es necesario que definas exactamente qué quieres hacer y cómo lo quieres hacer.
Además de jquery también puedes mirar MooTools, prototype, Script.aculo.us, Dojo Toolkit
Insisto, el código completo es más extenso, hay que invocar las librerías, cargar las acciones en los eventos correctos, etc, etc.
En tu caso, si quieres hacer algo muy parecido a lo que se ve en la web que has compartido la secuencia de trabajos sería.
1. Generar el hemiciclo mediante svg y aplicarle el efecto hover (hay herramientas que te permiten pasar de illustrator o de inkscape a html5 incluyendo los efectos).
2. Diseñar la ficha con las áreas que serán dinámicas con valores por defecto (imagen con una imagen en blanco, nombre con cadena de texto vacía, descripción con cadena de texto vacía).
3. Definir de qué forma quieres cargar los datos y hacer pruebas de carga, general. Después hacer la carga particularizando al identificador que defina a cada concejal.
4. Asociar el evento click de jquery (o similar de otra librería) a una función que haga la llamada a los datos, los cargue en la ficha y aplique el efecto a la ficha. Si es la primera vez que se hace click además deberás lanzar un desplazamiento del canvas del hemiciclo y mostrar la ficha que por defecto está oculta.
Espero que por lo menos te sirva de orientación.