cómo mover el background de acuerdo con el cursor sobre el vuelo estacionario?

cuando el cursor se mueve sobre el control deslizante, el background también se mueve con el cursor sobre el cursor (enlace a continuación)

aquí hay un enlace al sitio usando este efecto. telemaruk

¿Cómo se llama este efecto? y cómo lograr este efecto? cualquier enlace útil por favor es algún tipo de complemento jquery o simple efecto css3. No lo resolveré por favor ayuda.

Acabo de crear un violín para mostrarle lo que quería decir con mi comentario sobre su pregunta. Deberías poder ir más lejos desde allí.

document.addEventListener('mousemove', function (event) { if (window.event) { // IE fix event = window.event; } // Grab the mouse's X-position. var mousex = event.clientX; var header = document.getElementById('header'); header.style.backgroundPosition = mousex/3 + 'px 0'; }, false); 

Como explicar lo que está sucediendo aquí:

  • mousemove una function en el evento mousemove en el document .
  • Toma la position actual del mouse usando event.clientX .
  • Cambia la position de background del elemento #header con #header de la velocidad ( mousex/3 ).

Verifíquelo en vivo: FIDDLE

Si desea exactamente lo mismo que el website que ha vinculado, debe tener algunos divisores entre sí y mover sus posiciones de background a otra velocidad. En este ejemplo, se mueve 1/3 de la velocidad de su mouse.

eche un vistazo a estos complementos, su efecto de paralaje es lo que busca.

http://stephband.info/jparallax/

http://bmc.erin.utoronto.ca/~walid/newmediasite/parallax/files/parallax.html

Lo que necesitas es tener tres imágenes una encima de la otra.

  1. Debe establecer su opacidad según su requerimiento.
  2. Establezca el índice z de las imágenes para que se superpongan y para que la position sea absoluta.
  3. Al pasar el mouseover , mueva las imágenes, la image superior más que las otras dos, la segunda más que la anterior.

Esto dará el efecto deseado.