Custom cursors are all the rage in web design. Web designers are transforming the boring default cursor into unique visual device which amplifies the look and feel of their creations.
Out of the box, we can't change the default cursor in tools such as Articulate Storyline and Rise. But, with some simple lines of code from Kursor.js, we can change the cursor ourselves... in under two minutes!
In this tutorial, I'll show you how you can create a custom cursor in under two minutes for your Articulate Storyline and Articulate Rise projects. A simple and powerful effect to change the experience for your learners.
The Tutorial:
Tools and codes you'll need:
Tools
In this tutorial, I used Brackets.io, a free open source code editor with live preview options. I highly recommend Brackets.io if you're looking to do coding.
Documentation
In this demo, we're using Kursor.js to change the cursor in our projects. Kursor.js makes it super easy and simple to change your cursor, with only a few lines of code and no need to install any additional dependencies.
Codes
First, you'll need to copy the link to the CDN into your header tags of your .HTML files. I've copied it below for you. Based on when you're reading this, recommend you check out Kursor.js to include a specific version number and build to avoid unexpected breakage from newer versions.
<link rel="stylesheet" href="https://unpkg.com/kursor/dist/kursor.css">Secondly, you'll need to copy the final script and configurations to the cursor towards the bottom of your body tags. You can customise the cursor by changing the number in type to a value between 1 and 5, remove the default cursor by changing the property to true/false and the colour of the cursor by changing the HEX code.
<script src="https://cdn.jsdelivr.net/npm/kursor@0.1.6/dist/kursor.min.js"></<