PP Movable Scene

This is good solution if you want create movable scene by mouse move.

Demo where you see nice used this plugin: https://perfectlyproject.pl

Installation:

npm i pp-movable-scene --save-dev

Usage:

import PPMovableScene from 'pp-movable-scene';
new PPMovableScene({
        selector: '#scene',
        animate: true,
        shapes: {
            1200: [
                {
                    type: 'example-shape-1',
                    left: 10,
                    top: 30,
                    ratio: 0.7,
                    speed: 900,
                    direction: 'invert'
                },
                {
                    type: 'example-shape-2',
                    left: 40,
                    top: 70,
                    ratio: 0.04,
                    speed: 500,
                }
            ],
            0: [
                {
                    type: 'example-shape-2',
                    left: 10,
                    top: 70,
                    ratio: 0.04,
                    speed: 500,
                }
            ]
        }
    });

Options:

Option	Description	Type
selector	Selector where will be create scene	string
animate	Random animate for item	boolean
shapes	List shapes in this place we have to define breakpoint which is used to upwards. For example it's working like media query min-width in css	array

Options for shape object:

Option	Description	Type
type	Is param which setup class for element	string
top/left	Started top/left position in percent	integer
ratio	Ratio is used to set how long shift will be when we mouse move in any direction	float
speed	Setup speed transition in milliseconds	integer
direction	Setup direction, can be setup normal or invert, default is setup normal	integer

Methods:

Method	Description
.stop()	use when you want stop animation and effect for mousemove
.run()	use when you used earlier .stop() and you want run again effect