... is watching you

Developer
Moklick
Size
2,423 Kb
Views
26,312
  1. ... is watching you Previews
  2. ... is watching you HTML Codes
  3. ... is watching you CSS Codes
  4. ... is watching you JS Codes

How do I make an ... is watching you?

Interactive doodle suggestion!. What is a ... is watching you? How do you make a ... is watching you? This script and codes were developed by Moklick on 20 November 2022, Sunday.

... is watching you Previews
IQ Test

... is watching you - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>... is watching you</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canvas"></canvas>
<div class="google">Google</div> <script src="js/index.js"></script>
</body>
</html>

... is watching you - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=EB+Garamond);
* { margin: 0; padding: 0;
}
body { background:#f2f2f2; font-family: 'EB Garamond', serif;	color:#333;
}
#canvas {	display: block;	position: absolute;	left: 50%;	margin-left: -150px;
}
.google {	font-size: 100px;	text-align: center;
}

... is watching you - Script Codes JS Codes

window.requestAnimFrame = (function() {	return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60);	};
})();
var ctx, WIDTH, HEIGHT, leftEye, rightEye, mouse,
Eye = function(pos) { this.pos = {	x : pos.x,	y : pos.y	};	this.center = {	x : pos.x,	y : pos.y	};	this.translation = {	x : (window.innerWidth / 2 - canvas.width / 2) + this.center.x,	y : this.center.y };
}
Eye.prototype.draw = function() { ctx.beginPath();	ctx.arc(this.pos.x, this.pos.y, 9, 0, Math.PI * 2);	ctx.fillStyle = '#333';	ctx.fill();
}
Eye.prototype.update = function() {	var deltaX = mouse.x - this.translation.x;	var deltaY = mouse.y - this.translation.y;	var mag = Math.sqrt(deltaX * deltaX + deltaY * deltaY);	var angleRad = Math.atan2(deltaY, deltaX);	var newPosX = this.center.x + 6 * Math.cos(angleRad);	var newPosY = this.center.y + 11 * Math.sin(angleRad);	this.pos.x += (newPosX - this.pos.x) / 5;	this.pos.y += (newPosY - this.pos.y) / 5;
}
var init = function() { var canvas = document.getElementById('canvas');	ctx = canvas.getContext('2d');	canvas.width = WIDTH = 300;	canvas.height = HEIGHT = 125;	leftEye = new Eye({ x : WIDTH / 2 - 42,	y : HEIGHT / 2 + 18	});	rightEye = new Eye({	x : WIDTH / 2 + 8,	y : HEIGHT / 2 + 18	});	mouse = {	x : 0,	y : 0	};	bindEventHandlers();	draw();
}
var draw = function() { ctx.clearRect(0, 0, WIDTH, HEIGHT);	leftEye.update();	rightEye.update();	leftEye.draw();	rightEye.draw(); requestAnimFrame(draw);
}
var bindEventHandlers = function() { document.onmousemove = function(e) { mouse.x = e.pageX;	mouse.y = e.pageY;	}
}
init();
... is watching you - Script Codes
... is watching you - Script Codes
Home Page Home
Developer Moklick
Username moklick
Uploaded November 20, 2022
Rating 4.5
Size 2,423 Kb
Views 26,312
Do you need developer help for ... is watching you?

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!

Moklick (moklick) Script Codes
Name
Watch the cursor
Leaflet Transition Example
Zeichensatz
Fullscreen fun
Codepen Inception
3D Map Example
CCTV Everywhere
3D Mapbox
CSS Color Fading
Money Over Everything
Create amazing blog posts 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!