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

css-follow-cursor

v1.0.0

Published

Adds CSS variables which follow the cursor position

Downloads

62

Vulnerabilities

Powered byPowered by Snyk
  • 0High
  • 0Medium
  • 0Low

Links

Git

Maintainers

aritz-crackeraritz-cracker

Keywords

simplefollowcursormousepointercss

Readme

css-follow-cursor

Because interactive eye-candy is amazing

Ever wanted to create various effects in CSS which which react to mouse movement? Well, with the power of this small library and dynamic CSS variables, you can!

Usage

See the elements with the test-area class in tests/test.html file for a simple example.

All you have to do is add the follow-cursor-vars class to any element you wish. The element will then have the following CSS variables:

  • --cursor-pos-x-px: The cursor position on the X axis, where 0px is on the left side of the element + padding + border.
  • --cursor-pos-y-px: The cursor position on the Y axis, where 0px is on the top side of the element + padding + border.
  • --cursor-pos-x-percentage: The cursor position on the X axis, where 0% is on the left side of the element + padding + border, and 100% is on the right side of the element + padding + border.
  • --cursor-pos-y-percentage: The cursor position on the Y axis, where 0% is on the top side of the element + padding + border, and 100% is on the bottom side of the element + padding + border.
  • --cursor-pos-x-fraction: Same as --cursor-pos-x-percentage, except 0 to 1 instead of 0% to 100% respectively. Useful with CSS's calc().
  • --cursor-pos-y-fraction: Same as --cursor-pos-y-percentage, except 0 to 1 instead of 0% to 100% respectively. Useful with CSS's calc().
  • --cursor-pos-fade-percentage: A value between 0% and 100%, with the value approaching 100% while the cursor hovers over the element, and 0% while the cursor is not hovering over the element.
  • --cursor-pos-fade-fraction: A value between 0 and 1, with the value approaching 1 while the cursor hovers over the element, and 0 while the cursor is not hovering over the element. Useful with CSS's calc().

This library also exports the following function:

  • addFollowCursorClass(...classes: string[]): Allows you to add your own class so you're not forced to use follow-cursor-vars.

The values of the --cursor-pos-fade-percentage and --cursor-pos-fade-fraction variables can be influenced using the variables listed below:

  • --cursor-fade-in-time: A value in either seconds (s) or milliseconds (ms) specifying how long it will take the the --cursor-pos-fade-* variables to go from their minimum value (0% or 0) to their maximum value (100% or 1) after the cursor enters the element. Defaults to 0s.
  • --cursor-fade-out-time: A value in either seconds (s) or milliseconds (ms) specifying how long it will take the the --cursor-pos-fade-* variables to go from their maximum value (100% or 1) to their minimum value (0% or 0) after the cursor leaves the element. Defaults to 0s.
  • --cursor-fade-function: This can be set to a CSS easing function. This function will be used for the "fade in" timing function. The "fade out" timing function will be the reverse of the "fade in". For example, ease-in will effectivly become ease-out. This design choice was made in order to make partial fade ins/outs consistent with full fade ins/outs.

If the follow-cursor-vars class (or the class you specified when using the addFollowCursorClass function) exists on the root <html> element, (or the root <svg> element) then these CSS variables will also be available.

  • --cursor-window-pos-x-px: The cursor position on the X axis, where 0px is the left side of the viewport, and increases rightwards.
  • --cursor-window-pos-y-px: The cursor position on the Y axis, where 0px is the top of the viewport and increases downwards.
  • --cursor-window-pos-x-percentage: The cursor position on the X axis, where 0% is on the left side of the viewport and 100% is on the right side of the viewport.
  • --cursor-window-pos-y-percentage: The cursor position on the Y axis, where 0% is on the top side of the viewport and 100% is on the bottom side of the viewport.
  • --cursor-window-pos-x-fraction: Same as --cursor-window-pos-x-percentage, except 0 to 1 instead of 0% to 100% respectively. Useful with CSS's calc().
  • --cursor-window-pos-y-fraction: Same as --cursor-window-pos-y-percentage, except 0 to 1 instead of 0% to 100% respectively. Useful with CSS's calc().
  • --cursor-window-pos-fade-percentage: A value between 0% and 100%, with the value approaching 100% while the cursor is in the viewport, and 0% while the cursor is not in the viewport.
  • --cursor-window-pos-fade-fraction: A value between 0 and 1, with the value approaching 1 while the cursor is in the viewport, and 0 while the cursor is not in the viewport.

Installation

You can add the css-follow-cursor package as a dependency of your npm project. Just be sure to import it somewhere so that the appropriate events are listened to.

If you run npm install && npm run build-standalone after cloning this repository, you will have a self-contained version of this library bundled with the external functions depended upon that you can use in a normal <script> tag. (Woah, old school!)