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).
The Landing is a social site for Athabasca University staff, students and invited guests. It is a space where they can share, communicate and connect with anyone or everyone.
Unless you are logged in, you will only be able to see the fraction of posts on the site that have been made public. Right now you are not logged in.
If you have an Athabasca University login ID, use your standard username and password to access this site.
We welcome comments on public posts from members of the public. Please note, however, that all comments made on public posts must be moderated by their owners before they become visible on the site. The owner of the post (and no one else) has to do that.
If you want the full range of features and you have a login ID, log in using the links at the top of the page or at https://landing.athabascau.ca/login (logins are secure and encrypted)
Posts made here are the responsibility of their owners and may not reflect the views of Athabasca University.