image

Eyes Exercise

Description

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.

Improvements

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

How to Run

To run the Eyes exercise on your machine, follow these steps:

  1. Clone the repo: git clone https://github.com/marialee222/eyes.git
  2. Open the project directory: cd eyes
  3. Open index.html in your web browser.

Explore the customization options for eyes and background color!

Roadmap of Future Improvements

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.

Tech Stack & Tools:

Results

Project background info goes here. Fusce laoreet ornare risus, et sollicitudin turpis viverra nec. Proin eu lacinia ipsum. Curabitur porta a mi sit amet iaculis.

30%

30% more lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ligula magna, posuere nec sollicitudin vel, dignissim a nisi. Maecenas porttitor imperdiet enim, a viverra elit commodo ac.

2.5X

2.5X more lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ligula magna, posuere nec sollicitudin vel, dignissim a nisi. Maecenas porttitor imperdiet enim, a viverra elit commodo ac.

60%

60% less lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ligula magna, posuere nec sollicitudin vel, dignissim a nisi. Maecenas porttitor imperdiet enim, a viverra elit commodo ac.

20K

20K lorem ipsum dolor sit amet, consectetur adipiscing elit.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ligula magna, posuere nec sollicitudin vel, dignissim a nisi. Maecenas porttitor imperdiet enim, a viverra elit commodo ac.

Client Testimonials

You can list client testimonials here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at erat vel quam cursus sagittis. Highlighted text example etiam volutpat ornare quam at cursus mi tristique sit amet.
Emily Doe, Project Lead at Company Lorem
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec at erat vel quam cursus sagittis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In egestas est at lorem lacinia malesuada vel at arcu.
John Doe, Manager at Company Lorem

Need Help With Your Project?

Your website is often the central hub for your online presence. It's the place where potential customers can learn more about your products or services. A well-developed website provides a positive user experience, which is crucial for retaining visitors and converting them into leads.
Color Switcher