Categories
CSS JQuery Web development

jQuery mousemove() Method/ CSS Eye Animation

The jQuery mousemove event occurs whenever the mouse pointer moves within the selected element.

CSS JavaScript Eye Animation
Do you like this gif? Check more gifs in the store.

Some time ago, we were creating CSS Eye Animation, today we’ll modify CSS from the previous animation, and we will add some jQuery (mousemove) to make the Iris of the eye follow the mouse cursor. Sounds fun! Isn’t :)?

*animation opened in the Safari browser.
To see the live output of the animation click here.

Before we’ll start creating the JavaScript/jQuery Eye Animation, I’ll try to show how the mousemove() method works on the following example:

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(document).mousemove(function(event){
    $("span").text(event.pageX + ", " + event.pageY);
  });
});
</script>
</head>
<body>

<p>Mouse is at coordinates: <span></span>.</p>

</body>
</html>

Output:

I hope that the example above clarified how jQuery mousemove event works. Let’s go to the animation.

To create the jQuery/ JavaScript Eye Animation watch the video tutorial and follow the steps below:

  1. Add HTML
  2. Add CSS
  3. Add CSS Animation
  4. Add jQuery/ JavaScript

Step 1.

Add HTML

We need to create the container, with the eyeball and the iris.

<div class="container">
  <div class="ball">
    <div class="iris"></div>
    </div>
  <div class="shadow"></div>
  </div>

Step 2.

Add CSS

Set the colour of the background, and set the position of the object:

body {
  background-color: #F5B7B1;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Style the container, eyeball and iris:

.container {
  position: relative;   
}

.ball {
  overflow: hidden;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle, rgba(255,255,255,1) 31%, rgba(255,253,253,1) 99%, rgba(218,218,218,1) 100%);
  box-shadow:inset -5px -5px 5px rgba(0,0,0,0.07);
  animation: bounceball alternate infinite 400ms 40ms ease-in-out;
}
.iris {
  width: 40%;
  height: 40%;
  left: 30%;
  top: 30%;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #9ACD32 0%, #00FF00 30%, #008000 100%);
  position: absolute;
  transform: translateX(0px) translateY(0px) skewX(0deg) skewY(2deg);
}
.iris:before {
  content: "";
  position: absolute;
  width: 35%;
  height: 35%;
  border-radius: 50%;
  top: 30%;
  left: 30%;
  background: black;
}

.iris:after {
  content: "";
  position: absolute;
  width: 31.25%;
  height: 31.25%;
  border-radius: 50%;
  top: 20%;
  left: 20%;
  background-color: rgba(255, 255, 255, 0.43);
}

Add the shadow:

.shadow {
  position: absolute;
  width:160px;
  height: 60px;
  border-radius:50%;
  background-color: rgba(0,0,0,0.09);
  top:190px;
  left:14px;
  animation: bounceball alternate infinite 400ms 40ms ease-in-out;
}

Note: To the ball, and to the shadow I added the animation – bounceball.

Step 3.

Add CSS Animation

@keyframes bouncebody { 
  to { transform: scaleX(1.03) scaleY(0.97); } 
}

Step 4.

Add JavaScript/jQuery

$(function() {
  var midWidth = Math.floor($(window).width() / 2);
  var midHeight = 100;
  var mousePos = {
    x: midWidth,
    y: midHeight
  };
  $(document).mousemove(function(event) {
    mousePos.x = event.pageX;
    mousePos.y = event.pageY;
    var transX = mousePos.x - midWidth;
    var transY = mousePos.y - midHeight;
    var skewX = 0;
    if (transX > -30 && transX < 30 && transY < 0) {
      skewX = transX / 2;
    } else if (transX > -30 && transX < 30 && transY >= 0) {
      skewX = -(transX / 2);
    } else if (transX > 30) {
      skewX = -(transY / 2);
    } else if (transX < -30) {
      skewX = transY / 2;
    }
    if (transX >= 30) {
      transX = 30;
    } else if (transX <= -30) {
      transX = -30;
    }
    if (transY >= 30) {
      transY = 30;
    } else if (transY <= -30) {
      transY = -30;
    }

    if (skewX >= 15) {
      skewX = 15;
    } else if (skewX <= -15) {
      skewX = -15;
    }
    $('.iris').css({
      "transform": "translateX(" + transX + "px) translateY(" + transY + "px) skewX(" + skewX + "deg) skewY(2deg)"
    });

  });

});

To see the live output of the animation visit: lenastanley.com

Enjoy coding!

Leave a Reply