[SOLUCIONADO] Animar imagenes con javascript

neglivv · #1 (**permalink**) 14/03/2013, 15:22

Hola compañeros!

Quisiera que por favor me orienten para saber con que más o menos puedo hacer algo como lo que tienen las imágenes del centro de esta página:

http://www.vitakids.com.ve/index.php

Sé que es con javascript, pero estaba buscando el script exacto con el que lo desarrollaron y no lo encontré, alguien sabe cuál es? o con que puedo hacer algo así?

de antemanos muchas gracias!

emprear · #2 (**permalink**) 14/03/2013, 18:49

Son varias imágenes con diferentes z-index, animadas con jQuery animate()
Saludos

neglivv · #3 (**permalink**) 15/03/2013, 08:13

Cita:

Iniciado por emprear

Son varias imágenes con diferentes z-index, animadas con jQuery animate()
Saludos

Emprear muchas gracias por tu respuesta!
A mi no se me habría ocurrido

pues no sé mucho de jQuery, solo necesitaba un punto de partida.
En base a lo que me dijiste investigue un poco y encontré esto:
http://cherne.net/brian/resources/jq...verIntent.html

Intentando e inventando logré que unas imágenes se movieran

Lo que hice fue esto:

Código HTML:

<head>
<script src="js/jquery/jquery-1.8.3.js"></script>
<script src="js/jquery/hoverIntent.js"></script>
      <style type="text/css" media="screen">

        ul#palabras {display:block; width:100%; padding:0; margin:0; list-style-type:none;}

        ul#palabras li {display:block; width:25%; padding:0; margin:0; float: left; position:relative; overflow:hidden; cursor:default;  font-size:0.9em; line-height:1.1em;}

    </style>
<script>
function makeTall(){$(this).animate({"margin-top": -15},200);}

        function makeShort(){$(this).animate({"margin-top": 0},200);}

        $("#palabras li").hoverIntent(makeTall, makeShort)
</script>
</head>
<body>
<ul id="palabras" >

<li><a class="palabra" href="" title="amenaza" style="margin-top:0"><img src="images/amenaza2.png"></a></li>

<li><a class="palabra" href="" title="riesgo" style="margin-top:0"><img src="images/amenaza1.png">Riesgo</a></li>

<li><a class="palabra" href="" title="desastre" style="margin-top: 0"><img src="images/amenaza1.png">Desastre</a></li>

</ul>
</body>

Ahí esta la solución por si a alguien le sirve

Carlangueitor · #4 (**permalink**) 15/03/2013, 14:01

Esa página es un mounstro, Cargan jQuery, Prototype y Scriptaculous, no hagan eso nunca.