Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Updated Enhanced scrolling text animation on the webpage by adding various effects, such as fading and scaling. #66

Closed
wants to merge 7 commits into from

Conversation

anshumanat
Copy link

@anshumanat anshumanat commented Oct 2, 2024

Pull Request Format

PR Title

Issue #33 : wanted to enhance the scrolling text animation on a webpage by adding various effects, such as fading and scaling. solved

Type of PR

  • Add X in the box to specify the improvement type.
  • Bug fix
  • Feature enhancement
  • Documentation update
  • Other (specify): ___________

Description

This pull request introduces scroll-triggered text animations to the webpage, enhancing user engagement and visual appeal. The implementation includes fade-in and scale effects applied to text elements as they enter the viewport during scrolling. Additionally, staggered timing has been incorporated to create a dynamic and smooth appearance of the text elements, improving the overall user experience.

Screenshots / Videos (if applicable)

Before:
There were no animations applied to the text elements. All text appeared statically without any visual transitions during page interactions.

Screenshot 2024-10-03 010821

After:
Text elements now animate with fade-in and scale effects when scrolled into view.
Each text block animates with staggered timing, providing a fluid and visually appealing experience during scrolling.

Screen.Recording.2024-10-03.011246.mp4

Screenshot 2024-10-03 010737

Checklist

  • I have performed a self-review of my code.
  • [X ] I have tested the changes thoroughly before submitting this pull request.
  • I have provided relevant issue numbers, screenshots, and videos after making the changes.
  • I have commented my code, particularly in hard-to-understand areas.

Additional Context

Key challenges addressed include efficient scroll detection using the Intersection Observer API and ensuring smooth performance across browsers.

Thank you for reviewing my pull request!

Added class text animated to all controller section texts
Added CSS for text animation
Copy link

vercel bot commented Oct 2, 2024

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

Name Status Preview Comments Updated (UTC)
collect-your-gaming-tools ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 7, 2024 5:51am

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants