<< Back

Quick script: mouse trails

Many sites on Neocities aim to carry on the legacy of the early Internet. What better way to achieve the goal than adding magical cursor dust?

Luckily for us, we don't have to think up complex particle control scripts, because that was already done for us! And why reinvent the wheel?

The most common scripts I see around the site come from Tim Holman. Don't forget to pop over to his GitHub page and visit his website.

All that is left for us to do is:

  1. Visit Tim's cursor-effects repo for the scripts he made.
  2. Take the first character of the page title and put at the end of the string.
  3. Check out the examples in the description under the Current Cursors (and Demo's) section if you feel picky.
  4. Open the js folder in the repo.
  5. Pick any file to download, or to copy, and place the resulting .js file anywhere into your website directory.
  6. On any page you want to show the magic, include your file like so:

    Important! Make sure if you are setting up this script on your page that you have a container element for your site contents that is absolutely positioned in your body. Changing the height of the body will offset where the effects appear. I haven't figured out a fix for it yet, but I will update the article when I do.

And you're done! This script isn't perfect, but it works. I may have misunderstood something with how it works, given I had to absolutely position some elements before it started to work properly (like in this example), but if you know how to fix it, let me know!

There is another script that works well here. To set this one up, simply copy the code from each block onto your page, separating it into CSS, HTML and JS files as needed. This one doesn't seem to require the absolute positioning, so this may suit your better. Make sure to check out the author's page as well!

Anyway, thank you for reading, if you found any mistakes or issues or want me to help you set it up, let me know! I hope this article was of use.