Efecto de seguimiento del puntero en imágenes web

  • Autor Autor dBer
  • Fecha de inicio Fecha de inicio
D

dBer

Gamma
Programador
Verificado por Whatsapp
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
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?
 
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.
 
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...
 
*jQuery es la crema del Javascript

Edito, encontré ésto en Stackoverflow:

Insertar CODE, HTML o 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>
 
Última edición:
Muchas Gracias!

Bizleet dijo:
*jQuery es la crema del Javascript

Edito, encontré ésto en Stackoverflow:

Insertar CODE, HTML o 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>
Hacer clic para expandir...

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 dijo:
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.
Hacer clic para expandir...
 
¿Te sirvió? No se si era el efecto que buscabas. Reemplaza la caja cuadrada con la imagen que quieras... ¡un saludo!
 
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.
 
Nunca había visto ese efecto, seguro que me puede valer para algo. ¡Gracias a ti! jaja
 
De nada! Para eso estamos, para ayudarnos los unos a los otros!
 
Hay que estar conectado o registrado para responder aquí.
Atrás
Arriba