Avdhesh-Varshney / WebMasterLog

A record of Unique Web Development Projects made with Angular, Next, Node, React, ExpressJS, Redux, Vanilla, Vue, etc. Technologies...
https://web-master-log.vercel.app
MIT License
81 stars 139 forks source link

📃: Add Eye that Follow #836

Open amanver45 opened 2 hours ago

amanver45 commented 2 hours ago

🔴 Title: Eyes that Follow: Creating an Eye-Following Mouse Cursor Project

🔴 Tech stack: HTML: Structure the page and create the eyes CSS: Style the eyes and their movement JavaScript: Detect the mouse movement and control eye direction 🔴 Objective: The objective of this project is to create a pair of animated eyes that follow the user's mouse cursor as it moves across the screen. This project demonstrates the combination of basic web technologies (HTML, CSS, and JavaScript) to create a visually interactive and engaging experience.

🔴 Summary: In this project, we will create two eyes using simple HTML and CSS for styling. Each eye will consist of a circular white background (the sclera) and a smaller dark circle (the pupil). Using JavaScript, we will track the position of the mouse cursor and dynamically adjust the position of each pupil to give the illusion that the eyes are following the cursor.

The project will involve:

Structuring the HTML layout for the eyes. Styling the eyes and pupils using CSS to ensure smooth movement. Using JavaScript to calculate the angle between each pupil and the mouse cursor and reposition the pupils accordingly. This interactive feature is commonly seen in playful web designs, educational websites, or just as an aesthetic element to make user experiences more fun.

github-actions[bot] commented 2 hours ago

Thank you for creating this issue! We'll look into it as soon as possible. Your contributions are highly appreciated! 😊