Comunidad de diseño web y desarrollo en internet online

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.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate