Como segunda parte de este post he querido mostrar como añadir el efecto para mover cada nube con tan sólo cogerla. La verdad es que no tiene mucha utilidad por si sola, pero logra distraer un poco, y he sabido de visitantes que se ponen a "jugar" con las nubes en Z-Graphics :)
El codigo html que ya teniamos es:
<div id="nube1"><img src="images/nube.png" /></div>
<div id="nube2"><img src="images/nube2.png" /></div>
<div id="nube3"><img src="images/nube.png" /></div>
<div id="nube2"><img src="images/nube2.png" /></div>
<div id="nube3"><img src="images/nube.png" /></div>
Lo primero que debemos hacer es (si es que no lo hemos hecho) agregar la libreria jQuery a la plantilla (justo antes de </head>):
<script src="https://www.google.com/jsapi"></script>
<script>
google.load('jquery', '1.3.1');
</script>
O tambien podemos usar:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
Despues de esto debemos agregar tambien los scripts del efecto:
<script type="text/javascript" src="ui.core.js"></script>
<script type="text/javascript" src="ui.draggable.js"></script>
<script type="text/javascript" src="ui.draggable.js"></script>
Los dos archivos anteriores los puedes descargar de aqui: ui.core.js y ui.draggable.js. Puedes usar estas direcciones si no tienes donde alojar los scripts, pero te recomiendo que la cambies.
Despues de agregar las librerias creamos el efecto:
<script type="text/javascript">
$(function() {
$(".movible").draggable();
});
</script>
$(function() {
$(".movible").draggable();
});
</script>
Y añadimos unos cuantos estilos a la clase "movible":
<style type="text/css">
.movible {
cursor:url(images/hand.png), pointer;
position:absolute;
z-index:1;
}
</style>
.movible {
cursor:url(images/hand.png), pointer;
position:absolute;
z-index:1;
}
</style>
Por ultimo agregamos la clase movible, que es la que tiene el efecto, a las nubes. Para eso reemplazamos el código html que teniamos antes:
<div id="nube1"><img src="images/cloud.png" class="movible" /></div>
<div id="nube2"><img src="images/cloud2.png" class="movible" /></div>
<div id="nube3"><img src="images/cloud.png" class="movible" /></div>
<div id="nube2"><img src="images/cloud2.png" class="movible" /></div>
<div id="nube3"><img src="images/cloud.png" class="movible" /></div>
| Demo | Download .rar |
6 comentarios
Hola Miguel vine a corresponderte con mis mejores deseos de Felicidad para estos días navideños.
Me sorprendió ver esta entrada porque precisamente hace unos días yo cree otra enlazando los sitios donde había visto este efecto, y no lo había visto aquí :(
También aprovecho para desearte mucho éxito e besa nueva web y decirte que me encanta la iniciativa y que te deseo ¡¡mucha suerte!!
Posted on 12/25/2009 2:01 p. m.
Gracias por el mensaje y la visita Gem@, de nuevo te deseo una muy muy feliz navidad :)
Posted on 12/25/2009 2:29 p. m.
Vaya, muchisims gracias por este tutorial. Son unos cuantos pasos pero se siguiendolos uno a unose logra.
Posted on 4/30/2011 12:04 p. m.
Y el resultado es muy llamativo, gracias por tu opinion
Posted on 4/30/2011 8:59 p. m.
Hola amigo, que pasó con los el demo que no fuenciona y los link de los archivos ui.core.js y ui.draggable.js, no funciona...
Posted on 1/14/2012 7:00 a. m.
Ya no cuento con ese dominio, se me vencio el contrato.
Las librerias las puedes encontrar aqui.
Posted on 1/14/2012 3:21 p. m.
Publicar un comentario en la entrada al viejo estilo