Due to some circumstances, this blog is now up for sale, for more enquires contact: Plushista@gmail.com
Pin It

jQuery Image Animation With Mouse Position

by Durodola Ridwan | Monday, December 30, 2013 | 12 Comments

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.


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

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


    #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>
 $(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();


  $(window).resize(function() {

    $('#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');
    // top image
    if (e.pageY < img_y1 && e.pageX > img_x1 && e.pageX < img_x2) {
   $('#container div').addClass('top');
    // bottom image
    if (e.pageY > img_y2 && e.pageX > img_x1 && e.pageX < img_x2) {
   $('#container div').addClass('bottom');
    // left image
    if (e.pageY > img_y1 && e.pageY < img_y2 && e.pageX < img_x1) {
   $('#container div').addClass('left');
    // right image
    if (e.pageY > img_y1 && e.pageY < img_y2 && e.pageX > img_x2) {
   $('#container div').addClass('right');
    // top left image
    if (e.pageY < img_y1 && e.pageX < img_x1) {
   $('#container div').addClass('top-left');
    // top right image
    if (e.pageY < img_y1 && e.pageX > img_x1) {
   $('#container div').addClass('top-right');
    // bottom left image
    if (e.pageY > img_y1 && e.pageX < img_x1) {
   $('#container div').addClass('bottom-left');
    // 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() {

  $('#container div').mouseout(function() {

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!".

12 comments : Post Yours! Read Comment Policy ▼
We have Zero Tolerance to Spam. Chessy Comments and Comments with Links will be deleted immediately upon our review.

  1. Le chargement des images provoquent un décalage lors du premier affichage, peut être qu'un sprite serait plus adapté, mais très bonne idée !


    1. Thủ ấn của Nhạc Thành liền hơi biến đổi, hắn lập tức dùng Vô Thượng Chân Hỏa bao trùm lấy Phá Chướng Đan, lập tức mười viên nội đan dần dần thành hình.

      - Thu.

      Nhạc Thành cất tiếng sau đó thu hồi thủ ấn, mười viên Phá Chướng Đan đã được hắn thu vào trong nhẫn trữ vật.
      đồng tâm
      game mu
      cho thuê nhà trọ
      cho thuê phòng trọ
      nhac san cuc manh
      số điện thoại tư vấn pháp luật miễn phí
      văn phòng luật
      tổng đài tư vấn pháp luật
      dịch vụ thành lập công ty trọn gói
      chém gió
      - Tại sao lại như vậy, động tĩnh này thật sự là quá lớn.

      Nhạc Thành thở ra một hơi, sau đó hắn lập tức lấy ra vài viên đan dược nhét vào trong miệng, luyện chế mười viên Phá Chướng Đan đã tốn không ít chân khí của hắn.

      Nhìn một mảng bừa bộn phía trước, Nhạc Thành liền đứng dậy.

      - Xoẹt.

      Vài nhân ảnh đã hiện ra trước mặt Nhạc Thành, đó chính là Tô Hân Nhi, Yến Hiểu Kỳ, Hàn Nguyệt chúng nữ. Chúng nữ chạy tới gần quan tâm xem hắn có bị thương hay không.

  2. I don't really mind you using my images, but next time it would be nice of you to ask or at least put a link to the original blog post.
    Best Regards, Jan Dellsperger

  3. Excellent article… i just came across ur blog and loving ur articles… as a newbies into blogging… its great to come across such knowledgeable blogs early in ur career to avoid some mistakes and increase chances of success… Keep up the good work dear.. cheers..

    Swapnil Kharche

  4. It's really interesting! Thank you!!! I think it's really fun when move mouse with the music and the head move also >.<
    Sorry :p

  5. IOS 10 is the tenth major release of the iOS operating system developed by Apple Inc. to use it without any restriction imposed by Apple Inc.You can download iOS 10 Jailbreak. from CydiaNerd.

  6. Images are the best option to add life in a website. But plain simple images are now outdated. Splashy, layouts for images are the current hot trends in web designs. Read more

  7. The blog or and best that is extremely useful to keep I can share the ideas of the future as this is really what I was looking for, I am very comfortable and pleased to come here. Thank you very much.
    animal jam | five nights at freddy's | hotmail login

  8. Thanks for your sharing! The information your share is very useful to me and many people are looking for them just like me! Thank you! I hope you have many useful articles to share with everyone!

  9. Thank you for sharing them! I hope you will continue to have similar posts to share with everyone! I believe a lot of people will be surprised to read this article!
    fb login

  10. jQuery is a compose a great deal less/accomplish more JavaScript coding dialect. On the off chance that you know JavaScript dialect, jQuery will most likely be simpler to learn. See More


About Me

My Photo
Durodola Ridwan is a Professional blogger, SEO Consultant, Certified Web developer/designer and founder of www.realcombiz.com. He love writing about Blogging tips, SEO, and play around with codes. You can connect with him on facebook, twitter @realcombiz, and Google+.

Recent Posts

Let's Connect

Site Links

Copyright © 2014 RealcomBiz. All Rights Reserved.
Powered by Blogger