@bva/mouse-follow-js
Advanced tools
Small library to add a small background that follows the user's cursor
Readme
MouseFollow.js is a small JS library that adds an element to the page that follows the user's cursor.
Table Of Contents
There are multiple ways to use this in a project.
The simplest way is to open the /dist folder, copy mousefollow.js into the project and link to it in your HTML.
<body>
<script src="mousefollow.min.js"></script>
<script src="app.js"></script>
</body>
When using NPM, the package must first be pulled from the registry:
#yarn
yarn add @bva/mouse-follow-js
#npm
npm install @bva/mouse-follow-js
One done here, follow the instructions in setup.
NodeJS
First the library needs to be included in the file that will be using it:
// ES6 Modules
import MouseFollow from '@bva/mouse-follow-js';
// Node Modules
const MouseFollow = require('@bva/mouse-follow-js');
Once it is included in the file, a MouseFollow instance needs to be created and initialized:
const mf = new MouseFollow();
mf.initialize();
That's it. Now there should be a circle following the user's cursor. See below for customization options.
The default behavior of MouseFollow is nice, but customization is needed for a more unique and on-brand experience. The MouseFollow constructure can accept an option configuration object. An example would look like:
const options = {
height: 40,
shape: 'square',
width: 30
};
const mf = new MouseFollow(options);
mf.initialize();
The above will add a 30x40px rectangle that will only follow the cursor when within the body.
Only used if shape is ellipse
This is a string value and can be filled in with any valid CSS value. Defaults to 50%.
Example values:
new MouseFollow({
borderRadius: '25%',
});
new MouseFollow({
borderRadius: '50% 25%',
});
new MouseFollow({
borderRadius: '30px',
});
This sets the background color of the item. Can be any vallid CSS color value. Defaults to #000.
Example values:
new MouseFollow({
color: '#ff0000',
});
new MouseFollow({
color: 'rebeccapurple',
});
new MouseFollow({
color: rgb(59, 99, 20),
});
This sets the element that will contain the MouseFollow item.
Example values:
new MouseFollow({
container: 'body', // Default
});
new MouseFollow({
container: '.classname',
});
new MouseFollow({
container: '[data-attribute]',
});
This sets the height of the item. Is of type Number.
Example values:
new MouseFollow({
height: 50, // Default
});
This sets the opacity of the item. Any number from 0 to 1.
Example values:
new MouseFollow({
opacity: 0.4, // Default
});
This sets the default shape of the item. There are two possible values: circle and square. The shape can still be manipulated with the width, height and borderRadius properties, but this option gives a quick starting point.
Example values:
new MouseFollow({
shape: 'circle', // Default
});
new MouseFollow({
shape: 'square',
});
This changes the delay of the item following the cursor. Takes a value of Number.
Example values:
new MouseFollow({
transitionDelay: 5, // Default
});
This sets the CSS transition duration on the item following the cursor. Takes values of type Number and is measured in milliseconds. A value of 1000 would mean 1 second.
Example values:
new MouseFollow({
transitionDuration: 200, // Default
});
This sets the CSS transition timing function. Takes any valid timing function.
Example values:
new MouseFollow({
transitionTimingFunction: 'ease-out', // Default
});
new MouseFollow({
transitionTimingFunction: 'ease-in-out',
});
new MouseFollow({
transitionTimingFunction: 'cubic-bezier(0.420, 0.000, 0.580, 1.000)',
});
This sets the width set in pixels. Takes a value of type Number.
Example values:
new MouseFollow({
width: 50, // Default
});
It is also possible to update a MouseFollow instance at any point using .update() on the instance object. It accepts a configuration object with the same options as above, but it only needs the options that are changing.
Example:
const mf = new MouseFollow({
color: '#684c85',
container: '.element',
});
mf.initialize();
const element = docuemnt.querySelector('.element');
element.addEventListener('click', (event) => {
mf.update({
color: '#ff9c11',
});
});
If the MouseFollow instance needs to be uninitialized for any reason, use the .uninitialize().
Example:
const mf = new MouseFollow({
color: '#684c85',
container: '.element',
});
mf.initialize();
const element = docuemnt.querySelector('.element');
element.addEventListener('click', (event) => {
mf.uninitialize()
});
FAQs
Small library to add a small background that follows the user's cursor
The npm package @bva/mouse-follow-js receives a total of 9 weekly downloads. As such, @bva/mouse-follow-js popularity was classified as not popular.
We found that @bva/mouse-follow-js demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST's new AI Risk Management Framework aims to enhance the security and reliability of generative AI systems and address the unique challenges of malicious AI exploits.
Security News
This episode of the Risky Biz podcast discusses how the rise of small open source packages and the shift towards individual maintainers makes the ecosystem more vulnerable to supply chain attacks.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.