flying-canvas is awesome. LOL!
Check out the live example: https://www.subidote.com/flying-canvas
- NPM: npm install flying-canvas
- Yarn: yarn add flying-canvas
- github: https://github.com/ajsoriar/flying-canvas
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">
<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>
Use src: "./void.png"
to load a pinture in the canvas.
<script>
flyingCanvas.init({
src: "./void.png"
});
</script>
<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>
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. |
sudo npm install -g eslint
sudo npm install -g grunt-cli
grunt build
flying-canvas is MIT licensed.