Frontend Mentor | 🔹Base Apparel | JavaScript | HTML-CSS

Solution retrospective

Hi again! The goal for this challenge was to try something new. I had always wondered how custom cursors were made on most of the "modern" webpages you see these days. So this challenge was a perfect excuse for me to learn about them.

Features

Added a custom cursor.
The custom cursor expands and acts as an outline when clicked on the input.

Questions

How well does this work on your device?
Did you find any bugs?

Known bugs

-The cursor's movement tends to become awkward upon resizing the window. (Clicking on the document should fix this issue, most of the times)

Click here to view the Live Site

Click here to view the Code

P.S. If you have any questions for me, Feel free to comment or message me on slack :)

Community feedback

MaryF• 350

@Janselin

Posted over 2 years ago

amazing cursor effect I loved it! The issue I'`ve found on my pc is that i cant access the imput since there's no scroll bar, have you hide it with overflow:hidden? I cant scroll down 😅

anyway I loved this one! Happy coding 🤗

Marked as helpful

bunee• 2,060

@buneeIsSlo

Posted over 2 years ago

Hi! @Janselin, Thanks! I'm glad you like it. I did add an overflow: hidden; to the body. This was done to prevent the page from showing scroll-bars if or when the cursor gets close to corners of the viewport.

I've refactored some code, Let me know if it works fine now. If it doesn't, can you Please share a screenshot of the page on Pasteboard?

Either way, I really appreciate your help :)

Vanza Setia• 27,855

@vanzasetia

Posted over 2 years ago

👋 Hi Bunee!

🎉 Congratulations on finishing this challenge! I kinda like the custom cursor that you created. It has an awesome transition once I clicked the input element. But, I found some bugs on the cursor:

First, when the pointer is above the image, the image becomes scary. The circle becomes bigger and makes the image become black. I guess it is because of the overlay inside the circle.
After I don't focus on the input element, the custom cursor becomes a full width of pink line. It looks like a scanner.

Anyway, here is my feedback:

Accessibility
- Any image that has aria-hidden="true" should not have alternative text.
- Use CSS to uppercase the text. The uppercased word in the HTML will be spelled by the screen reader (spelled letter by letter).
- You don't always have to wrap img with figure element. Usually, I use figure element if I need figcaption.
- For the error message, add aria-live="assertive" or role="alert" to make sure the user of assistive technology gets notice directly. Also, use p element instead of span.
Visual
- On mobile landscape view (640px * 360px), the hero image gets repeated in x direction.

To be honest, I don't understand the JavaScript code and webpack, so I can't give any feedback about it.

That's it! Hopefully, this is helpful!

Marked as helpful

bunee• 2,060

@buneeIsSlo

Posted over 2 years ago

Hey! @vanzasetia, Thanks! This was first time I tried something like this so, I expected it to have bugs.

This effect was intentional. It's an effect most aesthetic/modern websites have these days. Here's how I did it
I don't know what you mean by this, It'd be helpful if you could recreate this bug and share a screenshot on Pasteboard
As far as accessibility issues are concerned, I've made a note of the fixes and will implement them in future projects.
This is another intentional effect, I only did this so that the sides of the image wouldn't look empty on tablet view. Here's how I did it

Thanks for the help :)

🔹Base Apparel | JavaScript | HTML-CSS | Webpack

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community