npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

follow-js

v2.3.0

Published

let elements follow your cursor.

Downloads

298

Readme

follow.js

follow.js is an experimental, dependency free script that lets elements follow your cursor without a huge overhead.

Documentation / Examples

Getting started

Include script

You can do this through npm npm i -s follow-js ...

import Follow from "follow-js";

... with skypack.dev ...

import Follow from "https://cdn.skypack.dev/follow-js";

... or download the follow.min.js file and include it in your html.

<script src="follow.min.js"></script>

Otherwise, you have the option to use it with unpkg, jsdeliver or similar services.

Add elements

To create an element which follows the cursor, you now have to add the data-follow attribute (the name of the attribute can be changed through the options) to any tag you want.

<div data-follow>...</div>

Initialization

After you included the script in your application, you have to initialize follow.js. This can be done automatically, if you included it via script tag and add the data-follow-auto attribute to it

<script src="follow.min.js" data-follow-auto></script>

or manually through js.

const follow = new Follow();

Options

You have the possibility to define or override the default options of an instance, according to your needs. To do so, you have to pass an object with the wanted options in it to the constructor as following:

const follow = new Follow({
  debug: true,
  factor: 50,
  attribute: "follow",
  initiate: false,
});

Available options

| Option | Description | Default Value | | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | | debug | Adds console log to the script and as well some visual helpers like the position of the mouse as well as the origin location of an object... | false | | factor | The default factor of elements who doesn't define it explicitly with an own factor | 10 | | attribute | The attribute which is used to get all elements which should follow the cursor. | data-follow | | initiate | If the script should automatically start with the following elements after creating a new instance. If this is set to false, you have to initiate the instance by your own through the initiate method. | true |

Methods

After you initialized a new follow instance, you have multiple methods available. You can call them on your instance as following:

const follow = new Follow() < br > follow.destroy();

Available methods

| Method | Description | | ---------- | ---------------------------------------------------------------------------------------------- | | initiate | Initiate the script, get all elements which will follow the cursor and start following. | | destroy | Stop all following and calculating. | | refresh | Restart the instance. This method first calls the destroy and after that the start method. |

Featured projects

If you want your project that you've done with the follow.js Script to be featured on this page, please open an issue with the link to the project and a short description.

Links

follow.js is open source. You can find the source code on Github, and the distributed version on npm.

Issues / Questions

If you have any issues or questions with the script, you can open an issue on Github.

Contributions

Any contributions are welcome. Please fork the project and develop with small, focused commits so its easier for the reviewer to understand what you've done. After you're done with development, create a pull request to the development branch. We'll then have a look at the code and give you feedback.

Version history

| Version | Description | | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | | 2.3.0 | Include types in distributed es version | | 2.2.1 | Fixing es module support | | 2.2.0 | - Adding debug mode to script- Change initialization with options- Rename FollowDefaults to FollowOptions- Fixing error with multiple elements | | 2.1.3 | Split TypeScript classes into separate files and change bundler to rollup | | 2.1.2 | Fixing readme version number | | 2.1.1 | Fixing scroll bug to enable custom cursor | | 2.1.0 | Complete rewrite with TypeScript and classes | | 2.0.0 | Complete rewrite with the css transform property instead of cloned position absolute elements |