Mover imagen de fondo según el cursor con Javascript

Algo que quizás podría darle un toque especial a tu sitio, es darle movimiento al fondo de tu sitio usando Javascript, de acuerdo a cómo te mueves dentro del cuerpo del mismo y hacerlo es muy sencillo. No es mi intención decirte lo novedoso o innovador que esto eso, pero seguro te puede dar algunas ideas para tu sitio web con diseño dinámico.

En este tutorial usaremos:

esqueleto HTML.
sentencias CSS.
líneas de javascript.
Imagen al gusto.

Comencemos con el código HTML:

Código :

<!DOCTYPE html>
<html>
<head>
  <title>Mi fondo se mueve!</title>
  <script type="text/javascript">
    // aquí irá el javascript
  </script>
  <style type="text/css">
    /* aquí irá el CSS */
  </style>
</head>
<body>
<div id="info">
  El fondo se mueve!
</div>
</body>
</html>

Ahora definiremos los estilos CSS:

Código :

Lo siguiente va a ir en donde ya mencionamos anteriormente que iría el CSS.
body {
  background: url('imagen.jpg');
}
#info {
  width: 400px;
  text-align: center; background: #fff;
  margin: 150px auto 0 auto;
  padding: 30px;
  border-radius: 5px;
}

En realidad lo importante es sólo lo del body, el estilo de div.info es para darle un toque extra a nuestro ejemplo.

Hacer que se mueva la imagen de fondo con Javascript

Dentro de la sección mencionada para el javascript.

Código :

window.onload = function() {
  // onmousemove es el evento que detecta cada movimiento
  // del cursor sobre lo que abarca el cuerpo de la página
  // el cual nos envía la variable 'e' que contiene clientX
  // y clientY, las coordenadas del cursor
  document.onmousemove = function(e) {
    // la posición se calcula de acuerdo a X, pero
    // se divide entre 10, para que tenga un movimiento
    // más suave con respecto al movimiento real
    // del cursor del mouse. Después se hace negativo,
    // para que este sea en dirección contrario, con una
    // sensación de desplazamiento más que de arrastre.
    var x = -(e.clientX/10);
    // lo mismo para Y
    var y = -(e.clientY/10);
    // backgroundPosition son las coordenadas del fondo
    this.body.style.backgroundPosition = x + 'px ' + y + 'px';
  };
};

Ya lo demás es solo jugar con los valores y elegir la imagen que más nos guste. Te dejo el HTML de ejemplo aquí:

http://rola.me/2z61n

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

<!DOCTYPE html> <html> <head> <title>Algo</title> </head> <style type="text/css"> #algo { width: 300px; height: 300px; background: green url(back.jpg); } </style> <body> <div id="algo"></div> <script type="text/javascript"> window.onload = function() { var algo = document.getElementById('algo'); algo.onmousemove = function(e) { var x = -(e.clientX - this.offsetTop / 10); var y = -(e.clientY - this.offsetLeft / 10); this.style.backgroundPosition = x + 'px ' + y + 'px'; }; }; </script> </body> </html>

Mover imagen de fondo según el cursor con Javascript

Hacer que se mueva la imagen de fondo con Javascript

Publica tu comentario

o puedes...