This is a simple javascript file that gives you control over the browser cursor, alowing for fully animated cursors using CSS's cursor functionality.

Overview

animatedWebCursors.js

This is a simple javascript file that gives you control over the browser cursor, alowing for fully animated cursors using CSS's cursor functionality. Instead of hiding the mouse, and moving a DOM element around, this manipulates the actual cursor itself.

Click here for a demo.

Demo.gif

This javascript file includes support for both animated and non-animated cursors. You can easily mix things up and use both! You can set an animated (or static) cursor for the page's body, and for individual elements (tags, divs, paragraphs, buttons, links...). This way you can fully theme the cursor for your pages!

You can easily add your own animations too! Animations can be as long as you want.
Simply make a call to...

//for the body
animateCursor(['folder/path-to-image1.jpg', 'folder/path-to-image2.png...']);
//for individual elements, like the list tag
animateCursorForElement(['folder/path-to-image1.jpg', 'folder/path-to-image2.png...'], "li");

All cursors must be nested in the "cursorImages/" folder. You can nest them inside other folders within that, but make sure to pass it the nested folder name too. All paths are relative within the "cursorImages/" folder.

Since this uses the CSS's cursor: property the same rules apply.

  • Cursors should NOT be larger than 32 x 32 pixels in size, to stay supported across all browsers.
  • You can use PNG, GIF, JPG, BMP, CUR.

To start, include the animatedWebCursors.js file in your page. Copy and paste the following between your page's head tag...

<script src="animatedWebCursors.js"></script>

and simply cusomize the "window.load" event at the end of the animatedWebCursors.js file.

Bring back those classic Windows XP animated cursors!

This file includes ready made access to every classic cursor from the Windows XP themes! Yes, they're back and you can have them on your website! This includes those cute dinosaurs, the horse, the mouse with the wagging tail...

You can call any of the default functions for setting an animated cursor such as...

bananaani();//banana
dinosau2ani();//the cute dinosaur
dinosaurani();//the dinosaur...

Like mentioned, you can make a theme with cursors by applying a specific animated cursor (or static cursor) to individual elements (tags), such as button, a, input... Each animated cursor has a tag function that you can call to apply it to an element for which you want to change the cursor. Example code for the above...

window.addEventListener("load",function(){

		//default cursor (for the page)
		dinosau2ani();
	
		//other elements
		dinosaurani_tag("p");
		bananaani_tag("button");
		handnoani_tag("input");
		dinosaurani_tag("a");
		handani_tag("h1");
		horseani_tag("h2");
		pianoani_tag("h3");
		hourglasani_tag("h4");
		handwaitani_tag("h5");
		wagtailani_tag("h6");
	
	});

You can even have your own custom cursor animations!

Simply pass an array with paths to your desired image sequence, that's nested in the "cursorImages" folder.

  • Cursors should not be larger than 32 x 32 pixels, to be supported across all browsers.
  • To adjust the animation speed look for the num_animationSpeed variable in the animatedWebCursor.js javascript file. Higher values = slower animation. Lower values = faster.
animateCursor(['Custom/cupcakecursor/cupcakecursor_frame1.png', 'Custom/cupcakecursor/cupcakecursor_frame2.png', 'Custom/cupcakecursor/cupcakecursor_frame3.png']);

//example of this custom animation set to the bold tag...
animateCursorForElement(['Custom/cupcakecursor/cupcakecursor_frame1.png', 'Custom/cupcakecursor/cupcakecursor_frame2.png', 'Custom/cupcakecursor/cupcakecursor_frame3.png'], "strong");
You might also like...

Todo List is a simple web-based application that gives users the ability to organize their work and life daily tasks. Built with JavaScript, HTML/CSS.

Javascript Project Todo List Using Javascript to create a simple Todo List project. Populating the todo list and then removing from the list. Built Wi

Sep 28, 2022

To-Do List is a simple web based application that gives users an opportunity to note and organize their daily tasks. This app is built with JavaScript, HTML/CSS.

Project Name To-Do App Live Demo About Project In this feature, I built a to do list app which helps to list the tasks to be done at a particular time

Aug 18, 2022

A three.js and roslibjs powered web-control for zju fast-drone-250 for laptop-free flight control

A three.js and roslibjs powered web-control for zju fast-drone-250 for laptop-free flight control

Web Control for ZJU Fast-Drone-250 A three.js and roslibjs powered web-control for zju fast-drone-250 for laptop-free flight control (tested on Xiaomi

Nov 11, 2022

DevArms - a collection of developer utils that gives you extra arms to reach more in your tasks

DevArms - a collection of developer utils that gives you extra arms to reach more in your tasks

DevArms is a collection of developer utils that gives you extra arms to reach more in your tasks. It runs completely offline, and cross-platform across Windows, Mac and Linux. Written in Rust, React. Powered by Tauri.

Dec 18, 2022

Landscape Generator is An open Source web application that generates landscape drawings randomly, then gives you the ability to edit it and export it as SVG or PNG.

Landscape Generator is An open Source web application that generates landscape drawings randomly, then gives you the ability to edit it and export it as SVG or PNG.

Landscape Generator ## About Landscape Generator is An open Source web application that generates landscape drawings randomly, then gives you the abil

Apr 15, 2022

This is an app that gives you a mood by looking at the weather.

This is an app that gives you a mood by looking at the weather.

Weather-to-mood It is a basic application which shows user weather and date and by looking at these information it gives a mood. WeatherMoodApp This p

Jun 30, 2022

TRAB is a Chrome extension that gives you a single button to mark tweet as spam, and block the tweet's creator

TRAB is a Chrome extension that gives you a single button to mark tweet as spam, and block the tweet's creator

TRAB - Tweet Reporter and Blocker TRAB is a Chrome extension that gives you a single button to do two things with a single click: Mark a Tweet as spam

May 4, 2022

A quickstart AWS Lambda function code generator. Downloads a template function code file, test harness file, sample SAM deffiniation and appropriate file structure.

Welcome to function-stencil 👋 A quickstart AWS Lambda function code generator. Downloads a template function code file, test harness file, sample SAM

Jun 20, 2022
Comments
  • Added a new resource

    Added a new resource

    Hey, I have added a reference link for the head tag. I came upon this article while looking for resources to learn Tags in HTML. This citation, in my opinion, will enhance the content of this article. Hope that my contribution will benefit other learners.

    opened by Sachinbhatttech 0
Owner
alienmelon
alienmelon
Simple Cropper is a jQuery plugin which gives you ability to add cropping functionality to your web application

Simple Cropper is a jQuery plugin which gives you ability to add cropping functionality to your web application. It uses html5 canvas to create cropped images and css3, so it only works on latest browsers.

null 1 Feb 15, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Perfect interpolation for multiplayer cursors.

perfect-cursors Perfect interpolation for animated multiplayer cursors. Used in tldraw. ?? Love this library? Consider becoming a sponsor. Installatio

Steve Ruiz 452 Dec 15, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
LiveTabs is a Javascript library that allows you to create and manage tabs on the fly. This library gives the ability to your application to act like browser tabs, making dynamic tabs.

LiveTabs Table of content Description Goals Technologies Setup Description LiveTabs is a Javascript library that allows you to create and manage tabs

Hossein Khalili 3 May 3, 2022
Web based application that uses playerctl in it backend to control remotely your audio using the frontend as remote control.

Linux Remote This is a web based application that uses playerctl in it backend to control remotely your audio using the frontend as remote control. Do

Gabriel Guerra 4 Jul 6, 2022
Chrome extension for granular visual control over Notion.so

Notion Style Tweaks (Beta) A Chrome extension aiming to give granular control over the visual experience of Notion. Written in Svelte. Installation Ch

Eli 47 Dec 25, 2022
A robust and light-weight inventory management application designed to help businesses maintain perfect control over every unit of stock.

Inventory Buddy Access inventory anytime on web, tablet or mobile. Inventory Buddy is a robust and light-weight inventory management application desig

Brynn Smith 7 Nov 5, 2022