Efeito de rastreamento do ponteiro em imagens web

dBer · 18/05/2012

Hola gente queria saber con que libreria se consigue el efecto de que las imagenes de la web siguen el raton y parece que se les dota de movimiento, en principio me gustaria hacerlo horizontalmente

He estado buscando cosas, pero solo encuentro el efecto parallax que es con la libreria skroll y es mediante el skroll del raton, yo lo quiero solo con el puntero, que modifique los valores para "mover" las imagenes.

Alguna ayuda?

dBer · 18/05/2012

Solo estaba preguntando asi de simple, ni siquiera me he puesto a hacerlo.

Solo queria saber si era mejor hacerlo con jQuery o Javascript, o si habia una libreria especifica para ello.

Como ves, esa era mi pregunta. No que no sabia hacerlo, que quizas algo menos de critica y algo mas de autocritica os vendria bien a algunos.

dBer · 18/05/2012

Pues nada, me ha debido tocar el quisquilloso, nada que si quieres quedar por encima de mi, yo encantado e, te doy un pin y arreando.

Si ya pasamos de esto y me quieres ayudar... cosa que dudo mucho... pues la cosa es que me recomiendes algo si lo sabes, que para eso esta el foro, y si no tienes ni idea, pues deja de comentar.

Facil, sencillo...

Bizleet · 18/05/2012

*jQuery es la crema del Javascript

Edito, encontré ésto en Stackoverflow:

Inserir CODE, HTML ou PHP:

<script type="text/javascript">

function getMouseCoords(e) {
  var e = e || window.event;
  document.getElementById('msg').innerHTML = e.clientX + ', ' + 
           e.clientY + '<br>' + e.screenX + ', ' + e.screenY;
}


var followCursor = (function() {
  var s = document.createElement('div');
  s.style.position = 'absolute';
  s.style.margin = '0';
  s.style.padding = '5px';
  s.style.border = '1px solid red';

  return {
    init: function() {
      document.body.appendChild(s);
    },

    run: function(e) {
      var e = e || window.event;
      s.style.left  = (e.clientX - 5) + 'px';
      s.style.top = (e.clientY - 5) + 'px';
      getMouseCoords(e);
    }
  };
}());

window.onload = function() {
  followCursor.init();
  document.body.onmousemove = followCursor.run;
}

</script>

<div id="msg" style="width: 1000px; height: 1000px; border: 1px solid blue;"></div>

dBer · 18/05/2012

Muchas Gracias!

Bizleet disse:

*jQuery es la crema del Javascript

Edito, encontré ésto en Stackoverflow:

Inserir CODE, HTML ou PHP:

<script type="text/javascript">

function getMouseCoords(e) {
  var e = e || window.event;
  document.getElementById('msg').innerHTML = e.clientX + ', ' + 
           e.clientY + '<br>' + e.screenX + ', ' + e.screenY;
}


var followCursor = (function() {
  var s = document.createElement('div');
  s.style.position = 'absolute';
  s.style.margin = '0';
  s.style.padding = '5px';
  s.style.border = '1px solid red';

  return {
    init: function() {
      document.body.appendChild(s);
    },

    run: function(e) {
      var e = e || window.event;
      s.style.left  = (e.clientX - 5) + 'px';
      s.style.top = (e.clientY - 5) + 'px';
      getMouseCoords(e);
    }
  };
}());

window.onload = function() {
  followCursor.init();
  document.body.onmousemove = followCursor.run;
}

</script>

<div id="msg" style="width: 1000px; height: 1000px; border: 1px solid blue;"></div>

Por cierto wsoul, aqui el unico que ha sido un infantil ha sido tu, haciendo referencia a mis conocimientos, asi que lo que te digo, deja de escribir en el post, no necesito tu ayuda. Por lo menos, de la manera en la qe te estas comportando.

wsoul disse:
creo que te estas comportando de una forma bastante infantil, como te he dicho en el primer post

PUEDES HACERLO CON:

event.clientX y event.layerX

y como te he dicho en el segundo post

no se si quieres hacerlo con una librería e implementarlo o hacerlo tu mismo (si lo quieres hacerlo tu mismo, repito) event.clientX te puede servir.

Bizleet · 18/05/2012

¿Te sirvió? No se si era el efecto que buscabas. Reemplaza la caja cuadrada con la imagen que quieras... ¡un saludo!

dBer · 21/05/2012

Hola, gracias por el ejemplo. No es exactamente lo que buscaba, pero se agredece y mucho tu esfuerzo.

Exactamente, lo que buscaba era esto. Enlace eliminado

Pero, de nuevo te digo, que gracias por tu esfuerzo.

Bizleet · 21/05/2012

Nunca había visto ese efecto, seguro que me puede valer para algo. ¡Gracias a ti! jaja

dBer · 21/05/2012

De nada! Para eso estamos, para ayudarnos los unos a los otros!

Efeito de rastreamento do ponteiro em imagens web

dBer

dBer

dBer

Bizleet

dBer

Bizleet

dBer

Bizleet

dBer

Tópicos similares