jQuery Image Animation With Mouse Position

There are tons of possibilities in regards to jQuery’s animate function, but for this tutorial, I'm going to show how I got this head to follow your cursor. I mean, who doesn’t want to see his own head spin around like a maniac for hours? The animation effect depends on the movement of your mouse cursor. Awesome, don't you think? Let's get it done.

The HTML

<div id="container">
 <div class="front"></div>
</div>

Nothing is really special in the code above, just trying to make only the front image visible before mouse positioning.

The CSS

    #container div {
        margin: 0 auto;
        width: 250px;
        height: 250px;
 
    }

    .front { background: url(front.jpg); }
    .top { background: url(up.jpg); }
    .bottom { background: url(down.jpg); }
    .left { background: url(left.jpg); }
    .right { background: url(right.jpg); }
    .top-left { background: url(upleft.jpg); }
    .top-right { background: url(upright.jpg); }
    .bottom-left { background: url(downleft.jpg); }
    .bottom-right { background: url(downright.jpg); }

As you might have noticed, I use nine different images to simulate the rotating effect. Which image is displayed depending on the position of the mouse cursor. The values are set according to the image height and width.

The jQuery

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 <script>
 $(function() {
  var img_x1, img_x2, img_y1, img_y2;

  function set_xy_img() {
   img_x1 = $('#container div').offset().left;
   img_x2 = $('#container div').offset().left + $('#container div').width();
   img_y1 = $('#container div').offset().top;
   img_y2 = $('#container div').offset().top + $('#container div').height();
  }

  set_xy_img();

  $(window).resize(function() {
   set_xy_img();
  });

  $(document).mousemove(function(e){
    $('#container div').removeAttr('class');

    // front image
    if (e.pageY > img_y1 && e.pageY < img_y2
   && e.pageX > img_x1 && e.pageX < img_x2) {
   $('#container div').addClass('front');
    }
    else
    // top image
    if (e.pageY < img_y1 && e.pageX > img_x1 && e.pageX < img_x2) {
   $('#container div').addClass('top');
    }
    else
    // bottom image
    if (e.pageY > img_y2 && e.pageX > img_x1 && e.pageX < img_x2) {
   $('#container div').addClass('bottom');
    }
    else
    // left image
    if (e.pageY > img_y1 && e.pageY < img_y2 && e.pageX < img_x1) {
   $('#container div').addClass('left');
    }
    else
    // right image
    if (e.pageY > img_y1 && e.pageY < img_y2 && e.pageX > img_x2) {
   $('#container div').addClass('right');
    }
    else
    // top left image
    if (e.pageY < img_y1 && e.pageX < img_x1) {
   $('#container div').addClass('top-left');
    }
    else
    // top right image
    if (e.pageY < img_y1 && e.pageX > img_x1) {
   $('#container div').addClass('top-right');
    }
    else
    // bottom left image
    if (e.pageY > img_y1 && e.pageX < img_x1) {
   $('#container div').addClass('bottom-left');
    }
    else
    // bottom right image
    if (e.pageY > img_y1 && e.pageX > img_x1) {
   $('#container div').addClass('bottom-right');
    }
    });

  //console.log($('#container div').offset());
  $('#container div').mouseover(function() {
   //$(this).removeAttr('class');
   //$(this).addClass('front');
  });

  $('#container div').mouseout(function() {
   $(this).removeAttr('class');
   $(this).addClass('top');
  });
 });
 </script>

Now that we have all the image sets, all we have to do is check if the cursor is relative to the image. To do this I used a simple if-else operation. For every position, as seen in the code above, I tied the each class to the #container div tag. I check if the conditional .addClass in the jQuery and CSS class tally's. I also make sure the image load rapidly without a sign or blink when the image switch.

Go Social:

Subscribe For Free Updates!

*Please confirm the email sent to your inbox after clicking "Sign Up!".

Follow @realcombiz