Earbuds Website

This is a dynamic website designed to showcase a pair of advanced earbuds. The website features interactive components such as a model viewer, a gallery, an animated scroll effect, and customizable color options for the earbuds. It also includes sections for product details, contact, and a video player.

Features

1. Customizable Color Options

• Users can change the appearance of the earbuds by selecting from four different color options: Blue, Black, Red, and White.
• The earbuds image updates dynamically based on the selected color.

2. Interactive 3D Model Viewer

• An interactive 3D model of the earbuds is displayed using the <model-viewer> HTML tag.
• The model contains clickable hotspots that show additional information about key features (e.g., sensors, silicone tips, charging, microphone).
• Hotspots are interactive and reveal descriptions and images when hovered over.

3. Gallery with Image Slider

• A simple gallery displays images of the earbuds in various angles.
• Users can navigate between images using next/previous buttons or by pressing the left/right arrow keys.

4. Explosive Scroll Animation

• A scrolling animation is triggered when the user scrolls over a designated section of the page.
• This animation showcases an exploded view of the earbuds, with images appearing frame by frame as the user scrolls.

5. Details Section

• A dedicated section provides detailed information about the earbuds, including their features and specifications.
• The section includes well-styled content boxes with features such as background colors, borders, and padding to highlight specific information.

6. Video Player

• A video showcasing the earbuds is embedded on the page using the Plyr video player.
• The player is styled to fit the overall design of the page.

7. Contact Form

• A contact form allows users to get in touch with the creators of the earbuds.
• The form includes fields for the user's name, email, and message.

8. Footer with Social Icons

• The footer contains a logo and links to social media platforms via icon buttons.
• The social icons change color on hover to enhance user interaction.

Technologies Used

• HTML5 for structuring the webpage.
• CSS3 for styling and layout.
  • Flexbox and Grid are used for layout and positioning.
  • Custom styles for buttons, images, and interactive elements.
• JavaScript for interactive functionality:
  • GSAP (GreenSock Animation Platform) for animations (e.g., scroll-triggered animations, dynamic image transitions).
  • model-viewer for 3D model rendering.
  • Plyr for the embedded video player.
• ScrollTrigger for triggering animations on scroll.
• Custom JavaScript for interactive features like:
  • Changing the color of the earbuds image.
  • Changing gallery images based on user interaction.
  • X-ray slider to reveal internal components of the earbuds.

Setup and Usage

To set up this project locally, you can clone the repository:

Credits

Ishan Mehra (student) Marco de luca (professor) Robert Haaf (professor)