JSPM

@davefellow/danima-js

0.5.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
    • 0
  • Score
    100M100P100Q17006F
  • License GPL-2.0

Cursor based transform animations library for HTML Elements

Package Exports

  • @davefellow/danima-js
  • @davefellow/danima-js/danima.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@davefellow/danima-js) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

DanimaJS

Cursor based transform animations library for HTML Elements.

Created By

David Fuentes (@davefellow)

GitHub

https://github.com/DaveFellow/DanimaJS

Showcase

https://davefellow.github.io/DanimaJS/showcase/

How to use

You have to add the CSS class "danima-elem" to an HTML element in order for it to be recognized by the library.

You can customize the transform effect by using any of the following data attributes:

data-danima-translation-speed

Value format: number, number

This controls the translation speed, which also determines how far the element gets with cursor movements.

You can set it to "1, 1" and use it as a reference to adjust the desired value.

data-danima-translation-limit

Value format: number

This sets a limit for how far the translation gets with mouse movement, if it's not present or set to "0", the element will translate as far as possible.

The value is currently only set in pixels.

data-danima-rotation-speed

Value format: number, number

This controls the rotation speed, similar to data-danima-translation-limit.

You can set it to "1, 1" and use it as a reference to adjust the desired value.

data-danima-rotation-limit

Value format: number

This sets a limit to the angle set while rotating the element, if it's not present or set to "0", the element will rotate as much as possible depending on mouse position.

The value must be set on degrees (0°-360°).

data-danima-scale-speed

Value format: number, number

This controls the translation speed, which also determines how far the element gets with cursor movements.

You can set it to "1, 1" and use it as a reference to adjust the desired value.

data-danima-scale-min

Value format: number

The minimum size the element will be scaled to.

The value is currently only set in pixels.

data-danima-scale-max

Value format: number

The maximum size the element will be scaled to.

The value is currently only set in pixels.