🔹Base Apparel | JavaScript | HTML-CSS | Webpack

Community feedback

• 

  MaryF•350

  @JanselinPosted almost 3 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

  1

  ---

  

  bunee•2,020

  @buneeIsSloPosted almost 3 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 :)

  0
• 

  Vanza Setia•27,775

  @vanzasetiaPosted almost 3 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

  1

  ---

  

  bunee•2,020

  @buneeIsSloPosted almost 3 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 :)

  0