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).