CODEWITHSUNDEEP
javascriptjquery
He.W
He.W

Reputation: 727

Can't use jQuery to override inline style generated by jQuery?

My code is forking this pen, I also include my code in the stack snippet under this post.

what I want to achieve are:

  1. When the cursor is not inside the body, the eyeball would move randomly ( achieved ).

  2. When the cursor enters the body, the eyeball follows the cursor ( achieved ).

  3. When the cursor leaves the body, the eyeball starts moving randomly again ( not achieved ).

I called the function which is used to move the eyeball randomly in on("mouseleave") event, and it does move to a random position but it will immediately go back to the last cursor position, rather than staying at the new position. Can anyone point me to the right direction to fix the problem?

Thanks!

var 
	mouseOvering = false,
	pupil = $("#pupil"),
	eyeball = $("#iris"),
	eyeposx = 40,
	eyeposy = 20,
	r = $(pupil).width()/2,
	center = {
		x: $(eyeball).width()/2 - r, 
		y: $(eyeball).height()/2 - r
	},
	distanceThreshold = $(eyeball).width()/2 - r,
	mouseX = 0, 
	mouseY = 0;

$("body").ready( function(){
	if ( !mouseOvering ) {
		moveRandomly();
	} 
});

$("body").on('mouseleave', function(){
	mouseOvering = false;
	moveRandomly();
	console.log("mouseleave");
});

$("body").on('mousemove', function(e){
	mouseOvering = true;
	console.log("mouseovering");
	followCursor(e);
});

function moveRandomly() {
	var loop = setInterval(function(){
	 	var xp = Math.floor(Math.random()*80);
	  	var yp = Math.floor(Math.random()*80);
		pupil.animate({left:xp, top:yp});    
	}, 3500);
}

function followCursor(e) {
    var d = {
		x: e.pageX - r - eyeposx - center.x,
		y: e.pageY - r - eyeposy - center.y
    };
    var distance = Math.sqrt(d.x*d.x + d.y*d.y);
    if (distance < distanceThreshold) {
		mouseX = e.pageX - eyeposx - r;
		mouseY = e.pageY - eyeposy - r;
    } else {
		mouseX = d.x / distance * distanceThreshold + center.x;
		mouseY = d.y / distance * distanceThreshold + center.y;
    }
    var xp = 0, yp = 0;
	var loop = setInterval(function(){
		// change 1 to alter damping/momentum - higher is slower
		xp += (mouseX - xp) / 1;
		yp += (mouseY - yp) / 1;
		pupil.css({left:xp, top:yp});    
	}, 2);
}
body {
  background-color: #D1D3CF;
}

#container {
  display: inline;
  height: 400px;
  width: 400px;
}

#eyeball {
  background: radial-gradient(circle at 100px 100px, #EEEEEE, #000);
  height: 300px;
  width: 300px;
  border-radius: 100%;
  position: relative;
}

#iris {
  top: 10%;
  left: 10%;
  background: radial-gradient(circle at 100px 100px, #4DC9EF, #000);
  height: 80%;
  width: 80%;
  border-radius: 100%;
  position: absolute;
}

#pupil {
  top: 10%;
  left: 10%;
  background: radial-gradient(circle at 100px 100px, #000000, #000);
  height: 55%;
  width: 55%;
  border-radius: 100%;
  position: absolute;
}

@keyframes move {
  50% {
    transform: translate(-50px, 50px);
  }
}

@keyframes move2 {
  50% {
    transform: translate(-20px, 20px);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="container">
    <div id="eyeball">
      <div id="iris">
        <div id="pupil"></div>
      </div>
    </div>
  </div>

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

</html>

Upvotes: 2

Views: 92

Answers (2)

mahi-man
mahi-man

Reputation: 4676

The problem is that once the followcursor function was started it kept on moving back to the last known mouse position, even after the mouse had left the body. I just put a check on your mouseOvering variable inside your followcursor function:

var 
	mouseOvering = false,
	pupil = $("#pupil"),
	eyeball = $("#iris"),
	eyeposx = 40,
	eyeposy = 20,
	r = $(pupil).width()/2,
	center = {
		x: $(eyeball).width()/2 - r, 
		y: $(eyeball).height()/2 - r
	},
	distanceThreshold = $(eyeball).width()/2 - r,
	mouseX = 0, 
	mouseY = 0;

$("body").ready( function(){
	if ( !mouseOvering ) {
		moveRandomly();
	} 
});

$("body").on('mouseleave', function(){
	mouseOvering = false;
	console.log("mouseleave");
});

$("body").on('mousemove', function(e){
	mouseOvering = true;
	console.log("mouseovering");
	followCursor(e);
});

function moveRandomly() {
	var loop = setInterval(function(){
        
	 	var xp = Math.floor(Math.random()*80);
	  	var yp = Math.floor(Math.random()*80);
        if (!mouseOvering) {
		   pupil.animate({left:xp, top:yp});
        }
	}, 3500);
}

function followCursor(e) {
    var d = {
		x: e.pageX - r - eyeposx - center.x,
		y: e.pageY - r - eyeposy - center.y
    };
    var distance = Math.sqrt(d.x*d.x + d.y*d.y);
    if (distance < distanceThreshold) {
		mouseX = e.pageX - eyeposx - r;
		mouseY = e.pageY - eyeposy - r;
    } else {
		mouseX = d.x / distance * distanceThreshold + center.x;
		mouseY = d.y / distance * distanceThreshold + center.y;
    }
    var xp = 0, yp = 0;
	var loop = setInterval(function(){
		// change 1 to alter damping/momentum - higher is slower
		xp += (mouseX - xp) / 1;
		yp += (mouseY - yp) / 1;
        if (mouseOvering) {
		pupil.css({left:xp, top:yp});
        }
	}, 2);
}
body {
  background-color: #D1D3CF;
}

#container {
  display: inline;
  height: 400px;
  width: 400px;
}

#eyeball {
  background: radial-gradient(circle at 100px 100px, #EEEEEE, #000);
  height: 300px;
  width: 300px;
  border-radius: 100%;
  position: relative;
}

#iris {
  top: 10%;
  left: 10%;
  background: radial-gradient(circle at 100px 100px, #4DC9EF, #000);
  height: 80%;
  width: 80%;
  border-radius: 100%;
  position: absolute;
}

#pupil {
  top: 10%;
  left: 10%;
  background: radial-gradient(circle at 100px 100px, #000000, #000);
  height: 55%;
  width: 55%;
  border-radius: 100%;
  position: absolute;
}

@keyframes move {
  50% {
    transform: translate(-50px, 50px);
  }
}

@keyframes move2 {
  50% {
    transform: translate(-20px, 20px);
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <div id="container">
    <div id="eyeball">
      <div id="iris">
        <div id="pupil"></div>
      </div>
    </div>
  </div>

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

</html>

Upvotes: 0

Joundill
Joundill

Reputation: 7533

With Javascript you can only track where the cursor is on the webpage. If you shift your cursor outside the body, it's not possible for your code to know where the cursor is.

This is the reason the eye tracking your cursor stops moving when you move your cursor outside the window.

Upvotes: 1

Related Questions