flying-canvas

flying-canvas is awesome. LOL!

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. |

Development

sudo npm install -g eslint

sudo npm install -g grunt-cli

grunt build

License

flying-canvas is MIT licensed.