Animated Eyes Follow Mouse Cursor jQuery Plugin
Matthias Gielen March 01, 2023
The jQuery Eyes Follow Mouse plugin adds a pair of animated eyes that follow the mouse cursor to your website or application in a fun and interactive way. Eyes Follow Mouse plugin creates a pair of eyes that follow the user's mouse cursor using CSS3 animations and transforms. You can customise the size, colour, and shape of the eyes to match the design of your website.
You can also add multiple sets of eyes to your page, each with its own set of parameters. This plugin is an excellent way to add some playful interactivity to your website and keep your visitors interested.
The plugin animates the eyes with CSS3 and jQuery and is compatible with a wide range of browsers.
Eyes Follow Mouse Implementation
Include jquery-eyes-follow-mouse.js
Add the below HTML code
Style your page
/* eye-follow-mouse-cursor.css */ .eyes { width: 300px; height: 200px; position: relative; border-radius: 200px / 90px; background: white; display: flex; justify-content: center; align-items: center; overflow: hidden; } .eye { width: 90px; height: 90px; border-radius: 60%; background: #272928; position: absolute; top: 30%; transition: transform .3s ease-in-out; } .eye-retina { width: 60px; height: 60px; border-radius: 70%; background: white; position: absolute; top: 25%; left: 25%; transform: translate(-60%, -60%); }
Next: Creative Writing Tips for Better Blogging
Supported Devices
Google Chrome, Firefox, MS Edge, Opera, Wavebox
Tags
eyes follow mouse, animated eyes follow mouse cursor, free jquery plugin, javascript libraries, follow cursor animation, css follow cursor, eyes follow your mouse cursor, face follows mouse, follow cursor game, image follow cursor