Como puedo hacer este efecto?

[pakillo]

Hola, antes que nada no se si es el foro adecuado para mi pregunta, quisiera saber como puedo hacer un efecto como el que tiene esta pagina en el logo, quiero hacer lo mismo en el logo de una pagina, con la sombra y todo. Algún plugin o algo, la pagina esta hecha en wordpress así que me perdí al intentar ver que utiliza para hacerlo.

http://solidgiant.com/

Saludos

[Annoying]

Podrías echarle un vistazo a script.aculous, y lo de la sombra es una imagen png, a la cual le reduce el width, le da margin para centrar y le reduce la opacity, es lo que se puede observar desde el inspector xD.

Sino prueba con jQuery y alguno de sus complementos

Suerte :p

[catska]

Iniciado por pakillo

Hola, antes que nada no se si es el foro adecuado para mi pregunta, quisiera saber como puedo hacer un efecto como el que tiene esta pagina en el logo, quiero hacer lo mismo en el logo de una pagina, con la sombra y todo. Algún plugin o algo, la pagina esta hecha en wordpress así que me perdí al intentar ver que utiliza para hacerlo.

[url]http://solidgiant.com/[/url]

Saludos

el efecto que quieres lograr es este [URL="http://www.adrianpelletier.com/2009/05/31/create-a-realistic-hover-effect-with-jquery-ui/index.php"]http://www.adrianpelletier.com/2009/05/31/create-a-realistic-hover-effect-with-jquery-ui/[/URL]
, yo ya lo utilizo y es muy sencillo, saludos

[catska]

esto funciona con el jquery,

a un div le nombras un "id" y desde este codigo javascript se anima

$(document).ready(function() {

$("#id1").hover(function() {
$(this).stop().animate({ marginTop: "-10px" }, 200);
},function(){
$(this).stop().animate({ marginTop: "0px" }, 300);
});

$("#id2").hover(function() {
$(this).stop().animate({ marginTop: "-10px" }, 200);
},function(){
$(this).stop().animate({ marginTop: "32px" }, 300);
});

$("#id3").hover(function() {
$(this).stop().animate({ marginTop: "-10px" }, 200);
},function(){
$(this).stop().animate({ marginTop: "32px" }, 300);
});

});

en este ejemplo estoy animando 3 div diferentes. Este codigo lo puedes agregar en un .js aparte o bien como script antes del </head> del codigo html

Saludos

[pakillo]

Gracias, voy a probar :)
y con el código que has puesto se puede agregar la sombra? pero que la sombra cambie también reduciendo el tamaño como en el ejemplo de la página.

[catska]

Iniciado por pakillo

Gracias, voy a probar :)
y con el código que has puesto se puede agregar la sombra? pero que la sombra cambie también reduciendo el tamaño como en el ejemplo de la página.

en el ejemplo de la pagina viene el mismo codigo + el efecto de la sombra