New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
animated-cursor
Advanced tools
animated-cursor - npm Package Compare versions
Comparing version 1.1.1 to 1.1.2
| { | ||
| "name": "animated-cursor", | ||
| "version": "1.1.1", | ||
| "version": "1.1.2", | ||
| "description": "Create a custom, animated cursor in pure JS.", | ||
@@ -5,0 +5,0 @@ "repository": { |
110
readme.md
@@ -7,5 +7,4 @@ # Animated Cursor | ||
| ## Contents | ||
| ## Contents | ||
| 1. [📌 Features](#-features) | ||
@@ -22,3 +21,4 @@ 2. [🎯 Quickstart](#-quickstart) | ||
| ## 📌 Features | ||
| ## 📌 Features | ||
| - Dependency free, pure JavaScript library. | ||
@@ -35,2 +35,3 @@ - Replaces native Cursor with custom animated cursor. | ||
| ### More the specifically, the cursor is made of | ||
| - An inner dot (`cursorInner`) | ||
@@ -63,6 +64,7 @@ - An outer, outlining circle (`cursorOuter`), with slight opacity based on the inner cursor's color | ||
| Import and initialize. Example is using defaults but accepts an options paramter (see below) | ||
| ``` | ||
| import AnimatedCursor from 'animated-cursor' | ||
| // Using just default options | ||
| // Using just default options | ||
| const ac = AnimatedCursor() | ||
@@ -75,2 +77,22 @@ | ||
| ### Use from CDN / script | ||
| To include via CDN, find the latest UMD version at https://unpkg.com/animated-cursor and include via script tag, like so: | ||
| ``` | ||
| <script src="https://unpkg.com/animated-cursor@1.1.1/dist/index.umd.js"></script> | ||
| ``` | ||
| then call and init: | ||
| ``` | ||
| const ac = window.animatedCursor() | ||
| ac.init() | ||
| ``` | ||
| [Working example](https://codepen.io/StephenScaff/pen/poVxNoB) | ||
| <br/> | ||
| ## 🧬 Options | ||
@@ -80,19 +102,19 @@ | ||
| | Option | Type | Description | Default | | ||
| | ------------------------- | ------------------| ---------------------------------------------------------------| ----------------- | | ||
| | `cursorInnerSelector` | `String` | Selector name of inner cursor element. | `#cursor-inner` | | ||
| | `cursorOuterSelector` | `String` | Selector name of outer cursor element. | `#cursor-outer` | | ||
| | `useRequiredStyles` | `Boolean` | If lib should add required styles to element. | `true` | | ||
| | `hideNativeCursor` | `Boolean` | If native cursor should be hidden via internal method adding inline styles to `html` and `body`. | `true` | | ||
| | `color` | `String` | Hex value of desired color. | `#D3245C` | | ||
| | `outerAlpha` | `Number` | Alpha transparency level of outer cursor (0 - 1). | `0.3` | | ||
| | `outerBorderSize` | `Number` | Applies a border to the outer cursor. | `0.3` | | ||
| | `hasOuterBlendMode` | `Boolean` | Applies a blend-mode to the outer cursor | `0.3` | | ||
| | `size` | `Object` | Defines inner `size.inner` and Outer `size.outer` cursor sizes | `size: { inner: 8, outer: 40 }` | | ||
| | `hoverScale` | `Object` | Defines amounts inner/outer cursors scale on hover | `hoverScale: { inner: 0.75, outer: 1.5 }` | | ||
| | `clickScale` | `Object` | Defines amounts inner/outer cursors scale on click | `clickScale: { inner: 1.5, outer: 0.13 }` | | ||
| | `trailingSpeed` | `Number` | Speed of outer cursor's lerp'd trailing animation | `0.2` | | ||
| | `clickables` | `Array` | Array of clickable elements. d| `['a', 'input[type="text"]', 'input[type="email"]', 'input[type="number"]', 'input[type="submit"]', 'input[type="image"]', 'label[for]', 'select', 'textarea', 'button', '.link']` | | ||
| | Option | Type | Description | Default | | ||
| | --------------------- | --------- | ------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | `cursorInnerSelector` | `String` | Selector name of inner cursor element. | `#cursor-inner` | | ||
| | `cursorOuterSelector` | `String` | Selector name of outer cursor element. | `#cursor-outer` | | ||
| | `hasRequiredStyles` | `Boolean` | If lib should add required styles to element. | `true` | | ||
| | `hideNativeCursor` | `Boolean` | If native cursor should be hidden via internal method adding inline styles to `html` and `body`. | `true` | | ||
| | `color` | `String` | Hex value of desired color. | `#D3245C` | | ||
| | `outerAlpha` | `Number` | Alpha transparency level of outer cursor (0 - 1). | `0.3` | | ||
| | `outerBorderSize` | `Number` | Applies a border to the outer cursor. | `0.3` | | ||
| | `hasOuterBlendMode` | `Boolean` | Applies a blend-mode to the outer cursor | `0.3` | | ||
| | `size` | `Object` | Defines inner `size.inner` and Outer `size.outer` cursor sizes | `size: { inner: 8, outer: 40 }` | | ||
| | `hoverScale` | `Object` | Defines amounts inner/outer cursors scale on hover | `hoverScale: { inner: 0.75, outer: 1.5 }` | | ||
| | `clickScale` | `Object` | Defines amounts inner/outer cursors scale on click | `clickScale: { inner: 1.5, outer: 0.13 }` | | ||
| | `trailingSpeed` | `Number` | Speed of outer cursor's lerp'd trailing animation | `0.2` | | ||
| | `clickables` | `Array` | Array of clickable elements. d | `['a', 'input[type="text"]', 'input[type="email"]', 'input[type="number"]', 'input[type="submit"]', 'input[type="image"]', 'label[for]', 'select', 'textarea', 'button', '.link']` | | ||
| <br> | ||
| <br> | ||
@@ -129,7 +151,7 @@ ## 🤖 Project Commands | ||
| ## 🕹️ Usage | ||
| ## 🕹️ Usage | ||
| ### Cursor markup | ||
| ### Cursor markup | ||
| The cursor is created from 2 dom elements for the inner and outer parts. | ||
| The cursor is created from 2 dom elements for the inner and outer parts. | ||
@@ -143,3 +165,2 @@ ``` | ||
| You can use the default selector names (shown above), or pass your own via the options, `cursorInnerSelector` and `cursorOuterSelector` | ||
@@ -155,3 +176,3 @@ | ||
| ### Init Cursor | ||
| ### Init Cursor | ||
@@ -165,5 +186,5 @@ ``` | ||
| outerAlpha: 0.25, | ||
| size: { | ||
| inner: 8, | ||
| outer: 38 | ||
| size: { | ||
| inner: 8, | ||
| outer: 38 | ||
| }, | ||
@@ -189,3 +210,3 @@ hoverScale: { | ||
| AnimatedCursor is a hybrid npm module, so it supports both `import` and `require`. | ||
| AnimatedCursor is a hybrid npm module, so it supports both `import` and `require`. | ||
@@ -201,13 +222,13 @@ So, you can also `require` to lib like so: | ||
| ## 🎨 Cursor Types | ||
| You can use the options to create various cursor types / styles. (At some point I might organize cursor types as presets.) | ||
| ### Create a Donut Cursor | ||
| The outerBorderSize option applies a border to the outer cursor. You can leverage this to create a Donut style cursor: | ||
| ### Create a Donut Cursor | ||
| 1. Set `outerAlpha` to `0`s (or almost 0), | ||
| 2. Provide a numeric value for `outerBorderSize` lkkklllklwhere the outer cursor is a ring, apply a border to the outer cursor and set the outerAlphd0 (or close to 0) | ||
| The outerBorderSize option applies a border to the outer cursor. You can leverage this to create a Donut style cursor: | ||
| 1. Set `outerAlpha` to `0`s (or almost 0), | ||
| 2. Provide a numeric value for `outerBorderSize` lkkklllklwhere the outer cursor is a ring, apply a border to the outer cursor and set the outerAlphd0 (or close to 0) | ||
| ``` | ||
@@ -226,11 +247,11 @@ // Options to create a Donut cursor | ||
| ### Create a Blend-mode Cursor | ||
| ### Create a Blend-mode Cursor | ||
| You can create a neat Blend-mode cursor that filters the hovered text through the cursor. This probably works best with White / Black cursors. | ||
| 1. Set `hasOuterBlendMode: true`, | ||
| 1. Set `hasOuterBlendMode: true`, | ||
| 2. Set `outerAlpha` to `1` or close to `1`. | ||
| 3. Probs use a cursor color like `#fff` or `#000`. | ||
| 3. Probs use a cursor color like `#fff` or `#000`. | ||
| Note, make sure your inner and outer cursor elements are wrapped inside a parent (as show in the examples) as the `parentElement` of outer cursor is targets for the `blend-mode` filter. lkkklllklwhere the outer cursor is a ring, apply a border to the outer cursor and set the outerAlphd0 (or close to 0) | ||
| Note, make sure your inner and outer cursor elements are wrapped inside a parent (as show in the examples) as the `parentElement` of outer cursor is targets for the `blend-mode` filter. lkkklllklwhere the outer cursor is a ring, apply a border to the outer cursor and set the outerAlphd0 (or close to 0) | ||
@@ -251,7 +272,7 @@ ``` | ||
| ### useRequiredStyles | ||
| ### hasRequiredStyles | ||
| For the cursors to work, some styles are require for positioning, radius, pointer-events, stating opacity, and transitions. | ||
| By default, AnimatedCursor adds these styles via JS, directly on the cursor elements. If you'd prefer, you can stop the lib from adding those inline styles in favor of css. | ||
| Just set `useRequiredStyles: false` and provide your own css to the inner/outer cursor selectors. | ||
| By default, AnimatedCursor adds these styles via JS, directly on the cursor elements. If you'd prefer, you can stop the lib from adding those inline styles in favor of css. | ||
| Just set `hasRequiredStyles: false` and provide your own css to the inner/outer cursor selectors. | ||
@@ -268,8 +289,9 @@ This action would also allow you to modify the transition speed and easings of the cursors scaling (transform) animation. | ||
| transform: translate(-50%, -50%); | ||
| transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; | ||
| transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out; | ||
| } | ||
| ``` | ||
| <br/> | ||
| ### hideNativeCursor | ||
| ### hideNativeCursor | ||
@@ -290,2 +312,2 @@ The `hideNativeCursor` option is a `bool` that determins if native cursor should be hidden by adding inline styles to the `html` and `body` tags. | ||
| - Provide a destory method | ||
| - Maybe make different cursor types available as presets? | ||
| - Maybe make different cursor types available as presets? |
No alert changes
Improved metrics
- Total package byte prevSize
- increased by1.97%
102038
- Number of lines in readme file
- increased by8.36%
298
No dependency changes