Effect of Parallax when mouse over

Question

I’d like to know how I do that effect that has on that website or in that other.

When I move the mouse over the image it moves.

An important detail is that no matter where I pass the mouse, the image always has to move the second link This is very clear.

jQuery(document).ready(function($) {
  $('#Parallax').mousemove(
    function(e) {
      /* Work out mouse position */
      var offset = $(this).offset();
      var xPos = e.pageX - offset.left;
      var yPos = e.pageY - offset.top;

      /* Get percentage positions */
      var mouseXPercent = Math.round(xPos / $(this).width() * 100);
      var mouseYPercent = Math.round(yPos / $(this).height() * 100);

      /* Position Each Layer */
      $(this).children('img').each(
        function() {
          var diffX = $('#Parallax').width() - $(this).width();
          var diffY = $('#Parallax').height() - $(this).height();

          var myX = diffX * (mouseXPercent / 100); //) / 100) / 2;


          var myY = diffY * (mouseYPercent / 100);


          var cssObj = {
              'left': myX + 'px',
              'top': myY + 'px'
            }
            //$(this).css(cssObj);
          $(this).animate({
            left: myX,
            top: myY
          }, {
            duration: 50,
            queue: false,
            easing: 'linear'
          });

        }
      );

    }
  );
});

body {
  background-color: #3D7991;
  font-family: Verdana, sans-serif;
  font-size: small;
  line-height: normal;
}
.Clear {
  clear: both;
  height: 0;
  overflow: hidden;
}
h1 {
  margin-bottom: 0.5em;
}
p {
  margin-bottom: 0.5em;
  line-height: 1.6em;
}
a {
  color: #3D7991;
}
.Return {
  font-size: 1.2em;
  margin-top: 2em;
  text-align: center;
}
#Dev {
  position: absolute;
}
#OuterBox {
  background-color: #FAFAF2;
  margin: 25px auto auto auto;
  padding: 25px;
  position: relative;
  width: 750px;
  -moz-box-shadow: 5px 5px 15px #2A5364;
  box-shadow: 5px 5px 15px #2A5364;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
#Parallax {
  background-color: #880088;
  height: 500px;
  margin: auto;
  margin-top: 2em;
  overflow: hidden;
  position: relative;
  width: 750px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}
#Parallax img {
  position: absolute;
  top: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="Parallax">
  <img src="http://publicdomainvectors.org/photos/cloud_jon_phillips_01.png" />
  <img src="http://4.bp.blogspot.com/-pOjvZCG09C4/Uyo8SszT0iI/AAAAAAAAPBY/7HtQrWmHyYg/s1600/molde-nuvem-desenho.png" />
  <img src="http://2.bp.blogspot.com/-g11nccDlhlY/U_u4DBMTv9I/AAAAAAAARX8/tjurGjgli4I/s1600/Cute%2B-%2Bnuvem%2B-%2BCria%C3%A7%C3%A3o%2BBlog%2BPNG-Free.png" />
</div>

Answer 1

In general this effect is done with jQuery’s Parallax.

Here’s a full article about Simple parallax with Jquery and CSS

Here are some sites with examples:

50+ Best Jquery Parallax

Parallax.js

I think with those sources you should be able to do what you want!

Hugs! (: Observing: a print of the website you sent yourself.

Here’s a site with a VERY SIMPLE JS example for implementation.

Answer 2

Move the image with low factor, inertia and friction with offset contrary to the mouse. The mouse will be treated as an acceleration vector and the image will have great mass.