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

Added New "Cursor-Trail Effect" to The Website #363

Merged
merged 5 commits into from
Jul 7, 2024

Conversation

MastanSayyad
Copy link
Contributor

@MastanSayyad MastanSayyad commented Jul 6, 2024

Hey @Akshatchaube01 issue closes #347

I have created and added a New "Cursor-Trail Effect" to The Website as the previous one was not working properly and was lagging so much.

Changes I made:

  • Removed in-built react-animated-cursor and created cursor trail effect using HTML CSS and JS in React
  • The trail effect in the trail.js file uses a radial gradient background for the circle elements.
  • The gradient are from #00eaff and #0378ff, creating a visually appealing effect.
  • The CSS and HTML files have been updated to support this change in index.html
  • The Trail effect smoothly synchronizes with the cursor movement.
    - The mousemove event listener adjusts for the vertical scroll position using window.scrollY.
    - The circles' positions are updated in the animateCircles function, ensuring they follow the cursor with a trailing effect.
  • It works fast and smoothly across all pages.

Screen Record

trail.mp4

Please take a look and review it,

If possible please Increase the LEVEL Label as per the changed functionalities, Thank You!!

Copy link

vercel bot commented Jul 6, 2024

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

Name Status Preview Comments Updated (UTC)
time-warp ✅ Ready (Inspect) Visit Preview 💬 Add feedback Jul 7, 2024 6:42am

@Akshatchaube01
Copy link
Owner

It doesn't seem to work in the preview

@MastanSayyad
Copy link
Contributor Author

@Akshatchaube01 It is working fine, Try merging it, if it didn't work in deployment then revert it back I'll make the changes!

trail.mp4

@Akshatchaube01
Copy link
Owner

Akshatchaube01 commented Jul 7, 2024

Okay, pull the recent changes and then I'll merge @MastanSayyad

@MastanSayyad
Copy link
Contributor Author

@Akshatchaube01 done!

@Akshatchaube01 Akshatchaube01 merged commit 6f65dd2 into Akshatchaube01:main Jul 7, 2024
2 checks passed
@MastanSayyad
Copy link
Contributor Author

MastanSayyad commented Jul 7, 2024

@Akshatchaube01 yeah its working but not synchronized with the cursor, I'll make the changes right away!!

@MastanSayyad
Copy link
Contributor Author

The issue we're experiencing is likely due to the way we update the position of the circles in relation to the mouse coordinates. To ensure the circles follow the cursor correctly, I need to adjust the logic in animateCircles function. @Akshatchaube01

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

Successfully merging this pull request may close these issues.

BUG: Cursor-Trail Effect Issues
2 participants