Skip to content

Latest commit

 

History

History
63 lines (48 loc) · 3.12 KB

README.md

File metadata and controls

63 lines (48 loc) · 3.12 KB

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)