Googly Eye

Developer
Yang Li
Size
2,468 Kb
Views
2,024
  1. Googly Eye Previews
  2. Googly Eye HTML Codes
  3. Googly Eye CSS Codes
  4. Googly Eye JS Codes

How do I make an googly eye?

What is a googly eye? How do you make a googly eye? This script and codes were developed by Yang Li on 14 January 2023, Saturday.

Googly Eye Previews
IQ Test

Googly Eye - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Googly Eye</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id='eyes'> <div class='eye'> <div class='pupil left'></div> </div> <div class='eye'> <div class='pupil right'></div> </div>
</div>
<div id="smile"> <img src="http://vignette3.wikia.nocookie.net/brawloftheobjects/images/5/57/Closed_Mouth_Teeth_Smile.png/revision/latest?cb=20150419054317" alt="">
</div> <script src="js/index.js"></script>
</body>
</html>

Googly Eye - Script Codes CSS Codes

* { background-color: yellow
}
#eyes{ display: flex; justify-content: space-around; align-items: center; margin: 0 auto; width: 600px; height: 300px;
}
#smile img{ display: block; margin: 0 auto; width: 500px; margin-top: -120px;
}
.eye { background-color: white; width: 150px; height: 150px; border-radius: 50%; position: relative;
}
.pupil { position: absolute; background-color: black; width: 80px; height: 80px; border-radius: 50%;
}

Googly Eye - Script Codes JS Codes

// Setting up variables and DOM elements
var cursorX;
var cursorY;
var width = document.documentElement.clientWidth;
var leftX = width/2 - 150;
var rightX = width/2 + 150;
var leftEye = document.getElementsByClassName("left")[0];
var rightEye = document.getElementsByClassName("right")[0];
// Setting up numerical position of pupils
leftEye.style.left = "35px";
leftEye.style.top = "35px";
leftEyeLNum = parseInt(leftEye.style.left)
leftEyeTNum = parseInt(leftEye.style.top)
rightEye.style.left = "35px";
rightEye.style.top = "35px";
rightEyeLNum = parseInt(rightEye.style.left)
rightEyeTNum = parseInt(rightEye.style.top)
// Tracking cursor X and Y by page X and Y
document.onmousemove = function(e){ cursorX = e.pageX; cursorY = e.pageY;
}
function moveEyes(){ // left eye moving left right if(cursorX < leftX && leftEyeLNum > 2){ leftEyeLNum -= 1 leftEye.style.left = leftEyeLNum + "px" } else if (cursorX > leftX && leftEyeLNum < 68){ leftEyeLNum += 1 leftEye.style.left = leftEyeLNum + "px" } // left eye moving up and down if(cursorY < 160 && leftEyeTNum > 10){ leftEyeTNum -= 1 leftEye.style.top = leftEyeTNum + "px" } else if (cursorY > 160 && leftEyeTNum < 60){ leftEyeTNum += 1 leftEye.style.top = leftEyeTNum + "px" } // right eye moving left right if(cursorX < rightX && rightEyeLNum > 2){ rightEyeLNum -= 1 rightEye.style.left = rightEyeLNum + "px" } else if (cursorX > rightX && rightEyeLNum < 68){ rightEyeLNum += 1 rightEye.style.left = rightEyeLNum + "px" } // left eye moving up and down if(cursorY < 160 && rightEyeTNum > 10){ rightEyeTNum -= 1 rightEye.style.top = rightEyeTNum + "px" } else if (cursorY > 160 && rightEyeTNum < 60){ rightEyeTNum += 1 rightEye.style.top = rightEyeTNum + "px" } // Extention: if crossed-eyed, make eyes red if(leftEyeLNum >= 68 && rightEyeLNum <= 3){ leftEye.style.backgroundColor = "brown"; rightEye.style.backgroundColor = "brown"; } else { leftEye.style.backgroundColor = "black"; rightEye.style.backgroundColor = "black"; }
}
// Every 10ms move the eyes slightly depending on cursor location
setInterval(moveEyes, 10);
Googly Eye - Script Codes
Googly Eye - Script Codes
Home Page Home
Developer Yang Li
Username aussieyang
Uploaded January 14, 2023
Rating 3
Size 2,468 Kb
Views 2,024
Do you need developer help for Googly Eye?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Yang Li (aussieyang) Script Codes
Name
Mac Bar
Battleships
Geography Quiz
Highlight Me Starter
Battleships Starter
Recreate Google
Animated Clock Starter
Recreate Google Starter
Simple Hamburger Menu
Battleships Starter v2
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!