gauravsingh1281 / Rentalog.in--Frontend

Rentalog || Free Rent Management Web App For Landlords. With Rentalog, landlords can keep track of important information about their renters, including their names, addresses, and rental payment history.
https://visionary-fenglisu-db1b1d.netlify.app/
MIT License
95 stars 251 forks source link

[FEATURE] Custom Cursor #532

Open itznayan opened 1 month ago

itznayan commented 1 month ago

🚀 Feature Request

Description Implement a custom cursor that changes its appearance and animations when hovering over different elements on the webpage. This feature will enhance user interaction and provide visual feedback.

Problem Statement Many websites use standard cursors, which can lead to a monotonous user experience. This lack of visual feedback can make the site feel less engaging and intuitive. By adding animated custom cursors, we can improve user interaction, making it clear when users are hovering over clickable or interactive elements.

Proposed Solution The custom cursor will be styled to change its appearance based on the type of element being hovered over. For instance:

Links: The cursor could morph into a hand icon with a subtle bounce animation. Buttons: The cursor might change to a larger version of the button image with a pulsing effect. Images or Galleries: The cursor could display a zoom-in animation to indicate interactivity. For implementation:

Use CSS for cursor styling and animations. Utilize JavaScript to add classes that trigger animations when hovering over specific elements. Example behavior:

When hovering over a link, the cursor could smoothly transition into a hand icon with a bounce effect, enhancing the visual cue. Alternatives Considered An alternative would be to change the color or background of elements instead of the cursor. However, this may not provide the same level of engagement and may be less noticeable to users. Custom cursors offer a more dynamic and visually appealing way to signal interactivity.

Additional Context Consider including demo videos or animated GIFs showing the cursor in action. Screenshots of the cursor in various states (normal, hover over links, buttons, etc.) would also be helpful to visualize the proposed changes.

Checklist

github-actions[bot] commented 1 month ago

Congratulations, @itznayan! 🎉 Thank you for creating your issue for Rentalog. Your contribution is greatly appreciated and we look forward to working with you to resolve the issue. Keep up the great work! Should you have any queries or require guidance, do not hesitate to ask.