Cursor que deja rastro con JQuery

2 comentaron




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://lh3.googleusercontent.com/-R5oGj2opdMg/UCgb71rDZxI/AAAAAAAAFdY/Jf1L25JtcbU/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>