Sin duda, este efecto se puede considerar como una curiosidad creada con la libreria JQuery y con una imagen, pero para eso estamos, para probar cosas nuevas y originales en esto del diseño. Habreis visto como cambiar el diseño del cursor con CSS o las letras que siguen a este con Javascript. Pues en este caso, y tal como indica el titulo de esta entrada, se trata de poner un codigo que lo que hara es que al entrar en vuestro blog o web, el cursor ira dejando un rastro por la pantalla que ira siguiendolo y desapareciendo suavemente.
| ver demostracion |
Para ponerlo en tu blog, tan solo tienes que copiar el siguiente codigo y añadirlo en un gadget HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://hostredeando.ucoz.es/jquery/cursorrastro.js" type="text/javascript">
</script>
<script>
$(document).ready(function() {
$(document).mousemove(function(e) {
pointer = $('<img>').attr({'src':'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKmTGO4vUty6PZ6OLEj6ZlRZiynL8BgrtkVTchfib8KplUMIMHrukJJdvjKqOYDi25oDWmxHVgloh5_6w4Df-5r0ZK9mcPZkUN2VvKjdY4Nvs7gZurIDAMn0so6D-sGom1m3RkvHM-fVE/h120/pointer.png'});
$(document.body).append(pointer);
pointer.css({
'position':'absolute','z-index':'9999',
top: e.pageY +2 , //offsets
left: e.pageX +2 //offsets
}).animate({ opacity: 0 }, 1500, function(){ $(this).remove(); });;
});
});
</script>
