← Go back

Reactive Eyes for your website!


Posted on April 13, 2023 at 17:33 (GMT +00:00) by Colin

Continuing on from my previous post, I have been building more tutorials and after finishing a simple eyes tutorial for JavaScript, I ended up keep working on it to build a small re-usable reactive eyes "play thing" - possibly I will add this to my Paws Furever website somewhere :)

The idea of the project is a pair or more eyes that will follow the mouse movement or touch screen position from the user. If the user does not make any movement for 5 seconds the eyes will begin auto tracking to random positions on the window.



The code is fairly simple and implementation is extremely simple.

Download the reactive-eyes folder from the vendor folder in my github depository HERE. Add the files to your website project folder and include the stylesheet and JavaScript into your webpage.

Add this to your header:
<link href="vendor/reactive-eyes/reactive-eyes.min.css" rel="stylesheet">


And the javascript before the ending body tag

<script src="vendor/reactive-eyes/reactive-eyes.min.js"></script>


Next, to add your eyes is extremely simple, just add the following code to your page where you want to place the eyes.

<div class="eyes">
	<div class="eye"></div>
	<div class="eye"></div>
</div>


This will add a simple pair of eyes, but you can also modify the custom properties to modify some of the behaviour.

Add below the included stylesheet some inline css or inside another separate css file the following:

.eyes {
	/* cat eyes ? */
	--eye-width:190px;
	--eye-height:90px;
			
	--iris-width:75px; 
	--iris-height:75px;
	--iris-color: conic-gradient(
		from -180deg at 50% 50%, 
		#1B5E20 0%, 
		#2E7D32 40%, 
		#4CAF50 60%, 
		#2E7D32 100%);
			
	--pupil-width-min:2px;
	--pupil-width-max:30px;
		
	--pupil-height-min:45px;			
	--pupil-height-max:50px;
}



This is an example html using the cat eye effect



Here you can see a simple html file using Reactive Eyes.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
	<meta name="author" content="Colin J.D. Stewart">
	
	<title>Reactive Eyes</title>
	
	<link href="vendor/reactive-eyes/reactive-eyes.css" rel="stylesheet">
	
	<style>
		html { height:100%; }
		body {
			height:100%;
			display:flex;
			justify-content:center;
			align-items:center;
			background:#000;
		}
		
		.eyes {
			/* cat eyes ? */
			--eye-width:190px;
			--eye-height:90px;
			
			--iris-width:75px; 
			--iris-height:75px;
			--iris-color: conic-gradient(
				from -180deg at 50% 50%, 
				#1B5E20 0%, 
				#2E7D32 40%, 
				#4CAF50 60%, 
				#2E7D32 100%);
			
			--pupil-width-min:2px;
			--pupil-width-max:30px;
			
			--pupil-height-min:45px;			
			--pupil-height-max:50px;
		}		
	</style>
</head> 
	
<body>
	<div class="eyes">
		<div class="eye"></div>
		<div class="eye"></div>
	</div>

	<script src="vendor/reactive-eyes/reactive-eyes.js"></script>
</body>
</html>



I hope someone finds this interesting or fun to mess around with and if you do, please drop me a comment below!

/signing off
/Scripting/Programming/Web Development

Search
Tags
Accident Adoption Albums Algorithms Altcoins Animal Rescue AnL Aquarium Arma ArmA nd Leg Array Partitioning Arrays Assembler Assembly Atanasovsko Award Bazaar Binary Search Bitcoin Bohemia Bootstrap Bulgaria Bulgaria Za Mladite Burgas C C++ Celerity Charity Chemical Shock Chemlight Code Competition Compiler Contest Converter Covid-19 CPP Crypto Cryptocurrency css Data Recovery Database DataTables Decode Dedicated Dedicated Server Delphi Development Dialogs Divide & Conquer DIY Earplugs Event Exchange Eyes Fish Floating-point Flood Fog Freeware Function Funny Gallery Game Game Development Game Modding Gaming Garden Gardening Gazebo GERB GitHub Glitch Hamish Harding Happy New Year Heapify HeapSort Helga HTML HTML entities Introduction Jackie JavaScript JQuery Lake Language Linker Listbox ListNBox lnbSetTooltip MariaDB Maths Merry Christmas Mini Mining Miningpoolhub Mist Modding MPH Multiplayer MySql NGO OceanGate One Nature ORCA organisation OverHertz Paludarium Pandemic Pascal Paul-Henri Nargeolet Paws Furever Pergola Persistence Pets Photography Pier Plugin Programming progress bar Project PX Library Quicksort r53 Racing Replace Scripting Searching Server Shahzada Dawood Simulation Simulator Smoke Snippet Social media Software Sorting Source Sourcecode SQF Statistics Stockton Rush String Strings Submarine Suleman Dawood Terrain Detail Text Titan Tool Tragedy tutorial UCS4Char UE4 Unreal Engine Victims View Distance ViewBug web Web Development Website Welcome Woodworking Ziron Zynk