The KIRUPA orange logo! A stylized orange made to look like a glass of orange juice! Tutorials Coding Exercises Videos Books

FORUMS

Customize Theme


Color

Background


Done

Custom Mouse Cursor with Tracking

by kirupa   |   filed under Coding Exercises

A mainstay of many custom user experiences is a mouse cursor that either adds to or fully replaces the default mouse cursor. Take a look at the following example and move your mouse over the yellow box:

As you move your mouse cursor over the yellow box, you'll see a purple octopus track the mouse cursor with a slight delay. In this coding exercise, we'll look at how to re-create this.

Onwards!

Hint: Some Learning Resources and Getting Help

The following tutorials may provide some helpful tips and techniques to help you with this exercise: CSS Transitions, Using CSS Properties in JavaScript, Getting the Mouse Click Position.

We want to make this a fun learning activity. If you are stuck and need help, please ask on the forums. Please explain your problem in detail and one of the many helpful forum members will help you out.

Getting Your Badge

Once you have completed this exercise, you have earned the tremendous bragworthy privilege of adding the following badge to your collection:

To claim it, head to the forums and respond in the Custom Mouse Cursor topic. Be sure to include a link to your solution or insert a copy of your HTML/CSS/JS in the body of the message. Once you have created your topic, Kirupa will give you a virtual high-five and ensure this badge is added to your list of assigned badges.

One Possible Solution

As with all coding exercises, there are a billion ways to solve them. If you want to see one way of solving this, check out Kirupa's video and article below:

 

The KIRUPA Newsletter

Thought provoking content that lives at the intersection of design 🎨, development 🤖, and business 💰 - delivered weekly to over 100,000 subscribers!

SUBSCRIBE NOW

Serving you freshly baked content since 1998!
Killer hosting by (mt) mediatemple

Twitter Youtube Facebook Pinterest Instagram Github