Simulation link: eyes
The Eye Exercise is a fun and visually appealing project that creates interactive eye animations using HTML, CSS, and JavaScript. The project features a pair of expressive eyes that follow the user's mouse movements, creating an engaging and interactive experience. The eyes are not only responsive to user actions but can also be customized to suit user preferences.
Updates made to enhance user experience and functionality: The original exercise created a pair of eyes that follow mouse movement. The primary improvement made was the addition of blinking effect triggered every 5 seconds. In addition, the following updates were made:
- a pupil inside each eye
- box shadow for depth for the eye
- adjustments to height of the eyes and pupils to simulate blinking
- customization options for users to customize eye colors, background colors
To run the Eyes exercise on your machine, follow these steps:
- Clone the repo: git clone https://github.com/marialee222/eyes.git
- Open the project directory: cd eyes
- Open index.html in your web browser.
- Explore the customization options for eyes and background color!
![eyes1](https://private-user-images.githubusercontent.com/150623001/300052860-83f619df-5425-4db8-810f-c908bc714526.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk5ODA1MDQsIm5iZiI6MTcxOTk4MDIwNCwicGF0aCI6Ii8xNTA2MjMwMDEvMzAwMDUyODYwLTgzZjYxOWRmLTU0MjUtNGRiOC04MTBmLWM5MDhiYzcxNDUyNi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzAzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcwM1QwNDE2NDRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0yNGQzNGRjOGRiMTRiMWU5NWYyOTJkMmE5NzdiZGYxODBlNGRmYjk0OGRlYjE2ZjhmOGUxMjEwY2IwNTk2OTcwJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.TVbQfoYQntqbhxefmiosa3QcWg4dQyYmaM6acw_dhTA)
![eyes2](https://private-user-images.githubusercontent.com/150623001/300052890-090a89b4-5f4a-4e7b-9798-f23c15c9b48b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk5ODA1MDQsIm5iZiI6MTcxOTk4MDIwNCwicGF0aCI6Ii8xNTA2MjMwMDEvMzAwMDUyODkwLTA5MGE4OWI0LTVmNGEtNGU3Yi05Nzk4LWYyM2MxNWM5YjQ4Yi5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzAzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcwM1QwNDE2NDRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT04YmIzZTU3OTY2NTQ3OWViNDBkMTI3MjFlNzRiYWVlZWQwYTNkZDg3NWUzNzk5NGU3NzIwNTkzZTdjZGRkYTNjJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.YTQpHc1xnDw5vuOKX-f2KbiT-hdb89DWuWUEYkEJ0JA)
![eyes3](https://private-user-images.githubusercontent.com/150623001/300052913-e77e1021-5b84-42ea-b7a0-a41f7965d16e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk5ODA1MDQsIm5iZiI6MTcxOTk4MDIwNCwicGF0aCI6Ii8xNTA2MjMwMDEvMzAwMDUyOTEzLWU3N2UxMDIxLTViODQtNDJlYS1iN2EwLWE0MWY3OTY1ZDE2ZS5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzAzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcwM1QwNDE2NDRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0xMjY0MjZhNDFlYjk2OWNlZWFjNjA1ZDY0N2M0Y2EwY2ZmZjRmODY5MDNhYjQwZDRjMjgxZWMyYjA1YzhkYTVhJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.xqDv0aa-H6Z3InEOf0o2hgO_5U24T_k_Zv8NbWqCBrM)
![eyes4](https://private-user-images.githubusercontent.com/150623001/300052945-3eae7356-039d-4a33-9cab-0c15687b6020.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk5ODA1MDQsIm5iZiI6MTcxOTk4MDIwNCwicGF0aCI6Ii8xNTA2MjMwMDEvMzAwMDUyOTQ1LTNlYWU3MzU2LTAzOWQtNGEzMy05Y2FiLTBjMTU2ODdiNjAyMC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNzAzJTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDcwM1QwNDE2NDRaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT0zZWU0M2NmM2Y2NTFiOWNiOWQ3NTI0YWIxZGFmMGU2MzBhMTFjNzIzYjAyMTdhNWY1YmQzNWIyMDlkMTUyZmNmJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.rg-W-MlPpz66KP4VdyKUprubZrwNN-9xXdrg-rGZyBo)
Future improvements for the Eyes Exercise include:
- Multiple Sets of Eyes: Allow the addition of multiple sets of eyes with different behaviors, creating a more interactive experience.
- Responsive Design: Ensure the project is responsive on various devices and screen sizes.
- Interactive Controls: Introduce interactive controls to enable users to toggle features or trigger specific animations.
⭐ Feel free to contribute ideas or collaborate on these enhancements! ⭐
This project is licensed under the MIT License.