Me gustaría hacer un sitio web con efecto de paralaje del mouse como en esta página http://brightmedia.pl el paralaje del mouse de fondo es tan suave..

Tengo dos preguntas:

  1. Cuando pasa el mouse sobre un contenedor desde, digamos, la esquina superior izquierda, la imagen salta. ¿Cómo puedo hacer una animación suave?

  2. Cuando sacas el mouse de un contenedor, ¿cómo puedo hacer que la imagen se mueva un poco y se detenga con una animación suave?

¿Cuál sería el código para resolver estos problemas?

Aquí está el código básico:

$('.container').mousemove( function(e){
    var xPos = e.pageX;
    var yPos = e.pageY;

  $('#par1').css({marginLeft: -xPos/20});

});
.container {
  position: relative;
  width: 100%;
  height: 800px;
  background: grey;
  overflow: hidden;
  margin: 0 auto;
}

.container img {
  width: 110%;
  height: 100vh;
  position: absolute;
}

body{
  height: 1000px;
}
h1{
  font-size: 60px;
  z-index: 10;
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css.css">
  </head>
  <body>

<div class="container" id="container">
  <img id="par1" src="https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt="">
  <h1>TEXT</h1>

</div>

    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
  </body>
</html>
0
Mantvydas Binderis 2 mar. 2018 a las 18:25

3 respuestas

La mejor respuesta

Como resolví el problema hace mucho tiempo y olvidé esta publicación, decidí actualizar con la respuesta. Tal vez sea útil para alguien más.

Problema resuelto usando GSAP. A continuación puede ver el código que funciona exactamente como quería

    let wrap = document.getElementById('container');
  	let request = null;
  	let mouse = { x: 0, y: 0 };
  	let cx = window.innerWidth / 2;
  	let cy = window.innerHeight / 2;
    
  	document.querySelector('.container').addEventListener('mousemove', function(event) {
  		mouse.x = event.pageX;
  		mouse.y = event.pageY;
      cancelAnimationFrame(request);
      request = requestAnimationFrame(update);
  	});
    
  	function update() {
  		dx = mouse.x - cx;
  		dy = mouse.y - cy;
  		let tiltx = (dy / cy );
  		let tilty = - (dx / cx);

      TweenMax.to("#container img", 1, {x:-tilty*20, y:-tiltx*20, rotation:0.01, ease:Power2.easeOut});
    }
    
    window.addEventListener('resize', function(event){
       window.innerWidth / 2;
    	 window.innerHeight / 2;
    });
* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}
.container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
}
.container img {
  width: 110%;
  height: 120vh;
  position: absolute;
}
h1 {
  z-index:100;
  font-size: 6rem;
  z-index: 10;
  color:#333;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<div class="container" id="container">
  <img id="par1" src="https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt="">
  <h1>GSAP Mouse Parallax</h1>

</div>
1
Mantvydas Binderis 30 jun. 2018 a las 12:07

Puedes confiar una mouseenter / mouseleave para agregar animación:

$('.container').mousemove(function(e) {
  var xPos = e.pageX;
  var yPos = e.pageY;

  $('#par1').css({
    marginLeft: -xPos / 10
  });

});
$('.container').mouseenter(function(e) {
  var xPos = e.pageX;
  var yPos = e.pageY;
  $('#par1').animate({
    "marginLeft": -xPos / 10
  }, "slow");
});
$('.container').mouseleave(function(e) {
  $('#par1').animate({
    "marginLeft": "0"
  }, "slow");
});
.container {
  position: relative;
  width: 100%;
  height: 800px;
  background: grey;
  overflow: hidden;
  margin: 0 auto;
}

.container img {
  width: 110%;
  height: 100vh;
  position: absolute;
}

body {
  height: 1000px;
}

h1 {
  font-size: 60px;
  z-index: 10;
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
}
<div class="container" id="container">
  <img id="par1" src="https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt="">
  <h1>TEXT</h1>

</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
0
Temani Afif 2 mar. 2018 a las 19:08

Como dijo Temani, jugar con la transición y, finalmente, el retraso debería hacer el trabajo.

Para la primera pregunta: la transición parece apropiada, asociada con un oyente mousein. O incluso mejor, use la función $ (element) .animate () que permite establecer la duración de la animación. De esa manera, no establece ningún valor para la duración de la transición.

Para la segunda pregunta: oyente en mouseout> mismo proceso, pero animación más corta (para el desplazamiento de img y la duración de la animación).

Esto también debería darte algunas ideas: https://codepen.io/Aldlevine/pen/Jowke

Basado en el ejemplo de código de Teemani a continuación:

$('.container').mousemove(function(e) {
  var xPos = e.pageX;
  var yPos = e.pageY;

  $('#par1').css("margin-left", -xPos / 10);

});
$('.container').mouseenter(function(e) {
  var xPos = e.pageX;
  var yPos = e.pageY;
  $('#par1').css("margin-left", -xPos / 10);
});
$('.container').mouseleave(function(e) {
  $('#par1').css({"transition": "margin-left 1s ease-in-out", "margin-left": "0"});
  setTimeout( function() {
  		$('#par1').css("transition", "initial");
  }, 500);
});
.container {
  position: relative;
  width: 100%;
  height: 800px;
  background: grey;
  overflow: hidden;
  margin: 0 auto;
}

.container img {
  width: 110%;
  height: 100vh;
  position: absolute;
  transition: margin-left 0.2s;
/*  transition: margin-left 0.2s ease-in-out 0.2s;*/
}

body {
  height: 1000px;
}

h1 {
  font-size: 60px;
  z-index: 10;
  position: absolute;
  left: 50%;
  top: 30%;
  transform: translate(-50%, -50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container" id="container">
  <img id="par1" src="https://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg" alt="">
  <h1>TEXT</h1>

</div>
0
Potemkin 2 mar. 2018 a las 20:15