Have ideas to improve npm?Join in the discussion! »

    pp-movable-scene

    0.0.5 • Public • Published

    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

    Install

    npm i pp-movable-scene

    DownloadsWeekly Downloads

    3

    Version

    0.0.5

    License

    MIT

    Unpacked Size

    1.04 MB

    Total Files

    19

    Last publish

    Collaborators

    • avatar