Bouncing Element

JavaScript library to reproduce the famous DVD screensaver with any DOM element.

Installation

• Via CDN:

<script src="https://unpkg.com/bouncing-element"></script>

• Using npm:

npm i bouncing-element

Usage

import { createBouncer } from 'bouncing-element';

// Create the bouncer
const { start, stop } = createBouncer(elements, {
    // start the animation when creating the bouncer (default: true)
    start: true,

    // set to true to insert the elements to the body (default: false)
    insert: false,

    // distance in pixels to the screen borders (default: 50)
    startOffset: false,

    // frame transformers (default: [])
    // used to add different effects to the elements for each frame
    frameTransformers: [
        {
            key: 'hue',
            initialValue: 0,
            tranformer: (el, value) => {
                el.element.style.color = `hsl(${value}, 100%, 50%)`;
                return value == 360 ? 0 : value + 1;
            }
        }
    ]
});