Landing : Athabascau University

Unit 6 Reflection

  • Public
By Brent Beaudry December 26, 2020 - 2:28pm

I decided to use unit 6 to incorporate an engaging cursor follower to make the cursor easier to track and more interesting to the main client: kids. I wanted an emoji to follow the mouse pointer. I found a great example of code at https://dev.to/b4two/how-to-make-a-custom-cursor-with-css-and-jquery-5g3m ; not too complex (not that jQuery is complex by any means), easily modifiable, and fit my needs very closely. The modifications from original code were:

In the jQuery file:

-          Delete the functions for the .link class, which I’m not using

-          Change the scale of the mousedown function to make it more noticeable to the client (was at 0.2, changed to 1.5)

-          Change the clientY position to height() +42 (was /2, or centered) so that the follower would sit below the cursor

In the css file:

-          Add a font-size of 20px for the emoji size

-          Delete z-index (not needed)

-          Delete mix-blend-mode (not needed)

-          Delete transform: transition (not needed)

In html files:

-          Added the cursor div with the html code for the emoji

 

Initially, I had trouble figuring out why the click functionality wasn’t working, but I eventually figured out it was because the pointer was actually clicking on the follower div, not the button/link/field. Some experimentation with positioning, z-index (which I ended up eliminating), and scale on mousedown solved the problem. Lots learned about jQuery in this unit (my previous experience was very limited).

Comments

These comments are moderated. Your comment will not be visible unless accepted by the content owner.

Only simple HTML formatting is allowed and any hyperlinks will be stripped away. If you need to include a URL then please simply type it so that users can copy and paste it if needed.

(Required)

(Required)