search

NiranjanKumar001 / iPhone16Pro

Explore this sleek and first website clone of the iPhone 16 Pro! Built with React.js for an interactive feel, Three.js for stunning 3D visuals, and GSAP for smooth animations. IMPORTANT: Star the repo as you about contribute to the open source ,and this will work as a bookmark.
https://i-phone-16-pro.vercel.app
9 stars 14 forks source link

Fixing Floating Video Playing Tracker of Hightlight section. #8

Closed Arnob-B closed 1 week ago

Arnob-B commented 1 week ago

Issue resolved

Added Feature

Now the video player is completely a floating bar image

other features

  1. it fades in with a bouncing effect
  2. it fades out when the highlight section is passed on

Just like it is in the reference website

Brief changes

  1. The video playing tracker is set to fixed position with usual opacity 0% and out of the window frame
  2. whenever we approach the highlight section it pops in , ie making the opacity to 100% and fixing the player in the bottom position.
  3. And again sets to default while moving out.

    customization

    most of the customization are done in a single hook with well defined commenting so the floating bar is open to any new customization.

working demo :-> https://drive.google.com/file/d/17IF0cArmcPMdOyTa7frUEjaX7o4aKm1x/view?usp=sharing

vercel[bot] commented 1 week ago

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
i-phone-16-pro ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 5, 2024 10:59pm