Flying-canvas NPM

flying-canvas

flying-canvas is awesome. LOL!

flying-canvas demo image Check out the live example: https://www.subidote.com/flying-canvas

Use it this way

1 Download and Install flying-canvas

NPM: npm install flying-canvas
Yarn: yarn add flying-canvas
github: https://github.com/ajsoriar/flying-canvas

2 Include dependences

2.1 Include flying-canvas.min.js by referencing the necessary files

You will find .js and .css files in dist folder.

<script src="../dist/flying-canvas.min.js"></script>
<link rel="stylesheet" href="../dist/flying-canvas.min.css">

2.2 Initialize the plugin

<script>
    flyingCanvas.init({
        showWings: false,
        animation: false
    });
</script>

When the canvas pane bumps into the edges a function can be executed specifying bumpIntoEdgeFn

<script>
    flyingCanvas.init({
        showWings: false,
        bumpIntoEdgeFn: function(){
            console.log("Choca 1!");
        },
        animation: false
    });
</script>

2.3 Show a picture

Use src: "./void.png" to load a pinture in the canvas.

<script>
    flyingCanvas.init({
        src: "./void.png"
    });
</script>

2.3 Awesome

<script>
    flyingCanvas.init({
        width: 200,
        height: 400,
        showWings: false,
        bumpIntoEdgeFn: function(){
            console.log("Choca 1!");
        },
        zIndex: 300,
        awesome: 2 // This will render the picture of the column
    });
</script>

3 Configuration options

option	default	description
`flyingCanvas.init()`	-	Initializes the component allowing several parameters in json format.
`width`	350	Width of the canvas.
`height`	400	Height of the canvas.
`pictureFrameWidth`	75	Working on this now!
`src`	null	Route to an image.
`flyingCanvas.loadImage()`	-	Loads new images this way: `flyingCanvas.loadImage("newImage.jpg")`.
`flyingCanvas.clearImage()`	-	Removes the image
`animation`	boolean	In the case of false the component will not have movement when created.
`hidden`	boolean	In the case of false the component will be hidden by default.
`showWings`	boolean	Show wings
`awesome`	unknown	Awesome stuff will happen.
`flyingCanvas.start()`	-	Starts the movement of the canvas.
`flyingCanvas.stop()`	-	Stops the movement.
`flyingCanvas.hide()`	-	Hides the component. Does not destroy. The component will continue running in the background.
`flyingCanvas.show()`	-	Shows the component again.