Cree un fondo/objeto en movimiento interactivo que reaccione al cursor del espectador

El paralaje viene en muchas formas. El más común es un efecto de paralaje que reacciona al comportamiento de desplazamiento del usuario. Hoy, he decidido experimentar con un tipo diferente de efecto de paralaje que reacciona al movimiento del cursor y al acelerómetro móvil en su lugar.

Presentamos Interactive BG (Fondo), un complemento que le permitirá crear un fondo interactivo o cualquier elemento en la página que reaccione al movimiento del cursor. Dado que no hay un evento de movimiento del mouse en dispositivos móviles, este complemento utilizará el acelerómetro en su lugar para crear un efecto de paralaje en iOS y Android.

Nota: Este complemento ha sido probado en Chrome, Firefox, Safari, en el escritorio. Esto no ha sido probado en IE.

[tut demo=”http://www.onextrapixel.com/examples/interactive-background/” download=”http://www.onextrapixel.com/examples/interactive-background/interactive-background.zip”]

Cómo usar BG interactivo

¿Como funciona esto?

El concepto es aplicar la imagen como fondo y mover la posición del fondo de acuerdo con la posición del cursor al pasar el mouse. Primero comencé a experimentar con una función que mueve la posición del fondo, pero crea un poco de irregularidad en la animación cuando el cursor ingresa a la imagen y la posición del fondo debe restablecerse para poder moverse. Esta no es una buena experiencia para el usuario, así que al final, decidí usar la matriz de transformación de CSS3, que me permite mover el fondo en relación con la coordenada central sin tener que calcularlo yo mismo. Otro beneficio de usar matrix es que también puedo aplicar la escala y la posición de una sola vez sin tener que llamar y animar múltiples valores.

Después de completar una prueba en el escritorio, me di cuenta de que esto no funcionaría en dispositivos móviles porque no hay eventos de mouse en teléfonos inteligentes y tabletas, así que en lugar de no admitir dispositivos móviles, decidí experimentar con el nuevo evento JS llamado “devicemotion”. lo que me permitió determinar el estado del acelerómetro. Después de algunas pruebas y errores, pude convertir el valor de “aceleración, incluida la gravedad” en datos utilizables para la transformación de matriz de mi CSS3.

Ahora su fondo tendrá un hermoso efecto de paralaje que reacciona tanto al cursor del mouse como al acelerómetro de los dispositivos móviles.

Cómo hacer

En primer lugar, asegúrese de haber incluido la biblioteca jQuery más reciente (preferiblemente 2.0.0 o superior) disponible aquí, y luego incluya jQuery.interactive_bg.js, que se puede encontrar aquí, en el de su documento. Asegúrese de tener una imagen de fondo en su lugar para que pueda hacer referencia a ella en su código para usarla como fondo interactivo.

Ahora, comencemos a colocar el marcado:

HTML

<body>
  ..
  <div class="bg" data-ibg-bg="bg.jpg"></div>
  ..
</body>

Asegúrese de cambiar el atributo data-ibg-bg con la ubicación de su imagen de fondo preparada. Por ejemplo, si su imagen está en la carpeta raíz y se llama “fondo.png”, cambie el atributo a “/fondo.png”.

Ahora, puede llamar a la función de la siguiente manera y su fondo cobrará vida.

JS

$(".bg").interactive_bg({
   strength: 25,
   scale: 1.05,
   animationSpeed: "100ms",
   contain: true,
   wrapContent: false
 });

Con las opciones anteriores, su fondo se escalará ligeramente al pasar el mouse (para evitar que el usuario vea el área fuera de los límites) y reaccionará al cursor, creando un sutil efecto de paralaje. Por supuesto, estas opciones no están grabadas en piedra, así que exploremos lo que puede hacer con estas opciones:

  • fuerza: Esta opción le permitirá controlar la intensidad del movimiento del fondo cuando se mueve el cursor. Cuanto mayor sea el valor, más rápido y más fácil el cursor mueve el fondo. El valor predeterminado es 25.
  • escala: Puede establecer la escala a la que se ampliará el fondo cuando pase el ratón por encima. La opción acepta el valor de escala CSS normal, por lo que 1 significa escala original que deshabilitará la animación de escala al entrar y al salir. El valor predeterminado es 1,05.
  • velocidad de animación: Puede definir el tiempo que tarda en animarse la entrada y la salida de la escala. La opción acepta la duración de CSS como “100ms” o “2.5s”. El valor predeterminado es “100ms”.
  • Contiene: Si establece la escala en un valor superior a 1, esta opción, cuando se establece en verdadero, evitará que los objetos/fondo ampliados se derramen fuera de su contenedor. Establézcalo en falso si desea que el contenido escalado se derrame. El valor por defecto es verdadero.
  • resumir contenido: Esta opción le permite elegir si desea que todos los elementos dentro del contenedor definido reaccionen a su cursor, o solo el fondo. Cámbielo a verdadero para que todos los elementos del interior reaccionen de la misma manera. El valor predeterminado es falso.

Características avanzadas

Fondo receptivo
Para aprovechar al máximo este complemento, puede utilizar este fragmento adicional para crear un fondo interactivo receptivo que cambiará de tamaño con el ancho y alto de su navegador. Para hacer eso, agregue el siguiente código justo después de llamar a la función:

JS

$(document).ready(function(){
    $(".bg").interactive_bg(); // function call
});

  // change background size on window resize
  $(window).resize(function() {
      $(".bg > .ibg-bg").css({
        width: $(window).outerWidth(),
        height: $(window).outerHeight()
      })
   })

Fondo interactivo con acelerómetro
Lo bueno de este plugin es que no tienes que hacer nada. El complemento detectará automáticamente cuándo aplicar el efecto del acelerómetro en lugar de los eventos tradicionales del mouse utilizando datos como la disponibilidad de los eventos del acelerómetro y el tamaño de la pantalla. Pruebe la demostración en su teléfono inteligente y compruébelo usted mismo.

[tut demo=”http://www.onextrapixel.com/examples/interactive-background/” download=”http://www.onextrapixel.com/examples/interactive-background/interactive-background.zip”]

Conclusión

Ahora su fondo tendrá este efecto de paralaje interactivo como ningún otro con un esfuerzo mínimo. Espero que encuentre útil este complemento.

Si tiene alguna pregunta o sugerencia, no dude en hacérmelo saber en los comentarios a continuación.

0 Shares:
Te Recomendamos