jQuery Plugin - Canvas Animation
Available at NPM
$ npm i jquery-canvas-animationWhat's new in version 2
Editor
With JCA 2 comes a new written editor to your application. To enable this feature you have to editor: {enable: true} in your canvas configuration and add jquery.canvas-animation-editor.js or replace jquery.canvas-animation.js with jquery.canvas-animation.bundle.js in your application.
Draggable Items (Editor)
Draggable items is by default enabled. It works only with Editor and jQuery UI Draggable.
Icon Framework
It is now possible to use every icon framework like Fontawesome 5 for example.
CSS Namespace
All html classes and ids starts with jca-.
Bundle JS
The new file called jquery.canvas-animation.bundle.js includes jquery.canvas-animation.min.js and jquery.canvas-animation-editor.min.js
SCSS and LESS variables
Now you can configure your css output in SCSS and LESS.
Documentation
HTML/CSS Ratios The Canvas have to be an id attribute.
<div id="canvas" class="jca-ratio-21by9"> <!-- ... --> </div> <div id="canvas" class="jca-ratio-16by9"> <!-- ... --> </div> <div id="canvas" class="jca-ratio-4by3"> <!-- ... --> </div> <div id="canvas" class="jca-ratio-2by1"> <!-- ... --> </div> <div id="canvas" class="jca-ratio-1by1"> <!-- ... --> </div>JavaScript (jquery.canvas-animation.js)
$('#canvas').canvasAnimation({ steps: [ { addClass: '', // adds one or more classes to #canvas ('foo bar' adds 2 classes) removeClass: '', // remove one or more classes from #canvas ('foo bar' removes 2 classes) duration: 500, // duration of this step (milliseconds, default: 500) pause: false // pause animation at this point (boolean, default: false) } ], timeout: 0, // 0 = starts immediately the first step (milliseconds) resetDuration: 500, // time it takes to reset all animations (milliseconds) infinite: true, // if true: plays animation infinite autoplay: true, // if true: plays animation instantly controls: true, // if true: adds controls to canvas editor: { enable: false, // if true: show editor on page wrapper: '.jca-editor-container' // editor wrapper class }, useIcons: false, // use icons from an icon framework instead of css icons icons: { backward: '<i class="fas fa-step-backward"></i>', play: '<i class="fas fa-play"></i>', pause: '<i class="fas fa-pause"></i>', stop: '<i class="fas fa-stop"></i>', forward: '<i class="fas fa-step-forward"></i>', expand: '<i class="fas fa-expand"></i>', editor: '<i class="fas fa-edit"></i>' }, controlsWrapper: '.jca-controls', // class of the controls wrapper backwardButton: '.jca-backward', // class of step backward button playButton: '.jca-play', // class of play button pauseButton: '.jca-pause', // class of pause button stopButton: '.jca-stop', // class of reset button forwardButton: '.jca-forward', // class of step forward button expandButton: '.jca-expand', // class of expand button editorButton: '.jca-editor', // class of edit button classDone: 'jca-done', // is set if the animation is done classWait: 'jca-wait', // is set if autoplay : false and animation is never played or user clicked on reset button classForward: 'jca-forward', // is set if user clicked forward classBackward: 'jca-backward', // is set if user clicked backward classWrap: 'jca-wrap', controlsTemplate: '<div class="jca-controls">' + '<div class="jca-backward"></div>' + '<div class="jca-play"></div>' + '<div class="jca-pause"></div>' + '<div class="jca-stop"></div>' + '<div class="jca-forward"></div>' + '<div class="jca-expand"></div>' + '<div class="jca-editor"></div>' + '</div>', onPlay: null, // called before first animation step onDone: null, // called after last animation step onWait: null // called if classWait was added });JavaScript (jquery.canvas-animation-editor.js)
$('#canvas').canvasAnimationEditor({ enable: false, // if true: show editor on page decimal: 2, // accuracy of numbers draggableItems: true, // jQuery UI Draggable is required for this feature wrapper: '.jca-editor-container', // editor wrapper class labels: { top: 'top', left: 'left', width: 'width', height: 'height', newItem: 'New: ', newItemBlank: 'Blank', newItemExt: 'Extended', select: 'Select: ', selectCss: 'CSS', selectHtml: 'HTML', remove: 'Remove: ', removeItem: 'Item', removeStyle: 'Style', className: 'CSS class name', parentWidth: 'Parent width in px', parentHeight: 'Parent height in px', itemWidth: 'Item width in px', itemHeight: 'Item height in px', itemTop: 'Item offset top in px', itemLeft: 'Item offset left in px', confirmAppendPrepend: 'OK = append item / Cancel = prepend item', confirmRemoveItem: 'Are you sure to remove item?', confirmRemoveStyle: 'Are you sure to remove style?', alertCanvasId: 'Canvas needs attribute "id".' }, template: '<div class="jca-editor-container">' + '<div class="jca-container">' + '<div class="jca-col jca-cord-dimension">' + '<div class="jca-box">' + '<div class="jca-label jca-top"></div>' + '<div class="jca-label jca-left"></div>' + '<div class="jca-label jca-width"></div>' + '<div class="jca-label jca-height"></div>' + '<input type="number" step="0.01" name="jca_top" />' + '<input type="number" step="0.01" name="jca_left" />' + '<input type="number" step="0.01" name="jca_width" />' + '<input type="number" step="0.01" name="jca_height" />' + '</div>' + '</div>' + '<div class="jca-col jca-selector-breadcrumb"></div>' + '<div class="jca-col jca-code-col">' + '<div id="jca-html"></div>' + '<div id="jca-css"></div>' + '</div>' + '<div class="jca-col jca-button-col">' + '<span class="jca-new"></span><input type="button" name="jca_new_item" value=""/> <input type="button" name="jca_new_item_ext" value=""/><br/>' + '<span class="jca-select"></span><input type="button" name="jca_html" value=""/> <input type="button" name="jca_css" value=""/><br/>' + '<span class="jca-remove"></span><input type="button" name="jca_remove_item" value=""/> <input type="button" name="jca_remove_style" value=""/><br/><br/>' + '<span class="jca-width"></span> <span class="jca-width-val"></span> <span class="jca-height"></span> <span class="jca-height-val"></span><br/>' + '<span class="jca-top"></span> <span class="jca-top-val"></span> <span class="jca-left"></span> <span class="jca-left-val"></span>' + '</div>' + '</div>' + '</div>' });Examples
This software is in development. Could have bugs.