jQuery Plugin - Canvas Animation

Demo page

Available at NPM

$ npm i jquery-canvas-animation

What'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: [
        {
            name: '',        // a unique name to use in combination with .jca-goto
            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
    canvasClick: true, // if true: animation starts by clicking on 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
    gotoButton: '.jca-goto', // class of goto button / add data-step="step-name"
    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 must have 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

• HTML
• CSS Canvas
• CSS Animation
• JavaScript