aslams2020 / Stark-Tech-Portfolio

A tribute to Iron Man! This portfolio website is inspired by the iconic character Tony Stark and is designed to showcase various projects, skills, and experiences in a sleek and modern interface, reflecting the high-tech and innovative spirit of Stark Industries.
https://stark-tech-portfolio.vercel.app
MIT License
63 stars 115 forks source link

animation on scroll #245

Closed Priyanshi0112 closed 3 weeks ago

Priyanshi0112 commented 3 weeks ago

issue #230 solved

This pull request introduces the "Animate On Scroll" (AOS) library to enhance the user experience on the Stark Tech Portfolio website. With this update, movie cards in the comics section will now feature engaging animations as users scroll down the page.

Benefits:

  1. Enhances user interaction by drawing attention to key content.
  2. Creates a modern and visually appealing browsing experience.
  3. Provides a user-friendly interface that makes content easier to digest.

https://github.com/user-attachments/assets/8145649f-52b5-4a7c-badc-b03dbcea0fca

vercel[bot] commented 3 weeks ago

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

Name Status Preview Comments Updated (UTC)
stark-tech-portfolio ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 27, 2024 4:27am
Priyanshi0112 commented 3 weeks ago

@aslams2020 yes , I can do it but for all the pages can you please reward level 3 ?

aslams2020 commented 3 weeks ago

@Priyanshi0112 No, actually this was a level1 task, but for adding to more pages i can give level2

hope you understand.

Priyanshi0112 commented 3 weeks ago

@aslams2020 okay I will do it

Priyanshi0112 commented 3 weeks ago

@aslams2020 I have successfully implemented the scroll animation effect on both the variant and movie pages. However, on the "Watch Movie" page, the embedded YouTube videos prevent the AOS effect from functioning as intended.

If you prefer, I can implement a card slider effect on that page to enhance user interaction and maintain a dynamic presentation. Alternatively, we could leave the current setup of watch movie [age as it is . Please let me know your preference

watch movie page with card slider effect is shown below:

https://github.com/user-attachments/assets/426004b5-51c2-43ca-9be2-bf037c8f4966

aslams2020 commented 3 weeks ago

Oh, it's okay, Don't implement card slider on watch video page then...

Commit the changes without card slider effect on watch video.

aslams2020 commented 3 weeks ago

Hi, Please note that, I'll be able to review and merge the PR Tomorrow. Not today because of travelling.

Priyanshi0112 commented 3 weeks ago

@aslams2020 Animation on variants and movies added