CodelineRed - Canvas Animation

spread love
<!DOCTYPE html>
<html>
    <head>
        <title>Spread Love</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

        <link rel="stylesheet" href="css/jquery.canvas-animation.css">
        <link rel="stylesheet" href="css/love-canvas.css">
        <link rel="stylesheet" href="css/love-animation.css">
    </head>
    <body>
        <div id="love" class="canvas-ratio-16by9">
            <div class="square red"></div>
            <div class="square green"></div>
            <div class="square blue"></div>
            <div class="label">spread love</div>
        </div>
        <script src="js/jquery.js"></script>
        <script src="js/jquery-ui.js"></script>
        <script src="js/jquery.canvas-animation.bundle.js"></script>
        <script src="js/fontawesome.all.js"></script>
        <script src="js/scripts.js"></script>
    </body>
</html>
// jQuery.noConflict();
(function($) {
    $(document).ready(function() {
        $('#love').canvasAnimation(loveConfig);
    });
})(jQuery);

var loveConfig = {
    autoplay: true,
    infinite: false,
    useIcons: true,
    editor: {
        enable: false
    },
    steps: [
        {
            addClass: 'ca-1',
            duration: 800
        },
        {
            addClass: 'ca-2',
            duration: 800
        },
        {
            addClass: 'ca-3',
            duration: 800
        },
        {
            addClass: 'ca-4',
            duration: 500
        }
    ]
};
#love {
    background-color: black;
}

#love .square {
    position: absolute;
    width: 5%;
    height: 8.8%;
}

#love .square.red {
    background-color: red;
    top: 0;
    left: 47.5%;
}

#love .square.green {
    background-color: green;
    top: 91.2%;
    right: 0;
}

#love .square.green:after {
    content: '';
    position: absolute;
    right: 90%;
    width: 0%;
    height: 100%;
    background-color: red;
}

#love .square.green:before {
    content: '';
    position: absolute;
    bottom: 90%;
    width: 100%;
    height: 0%;
    background-color: red;
}

#love .square.blue {
    background-color: blue;
    top: 91.2%;
    left: 0;
}

#love .label {
    font-family: Arial, sans-serif;
    color: lime;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    position: absolute;
    top: 65%;
    left: 0;
    letter-spacing: 3px;
    opacity: 0;
    width: 100%;
    animation: hue 6s infinite linear;
    -webkit-animation: hue 6s infinite linear;
}
        
@media only screen and (min-width: 480px) {
    #love .label {
        font-size: 20px;
    }
}

@media only screen and (min-width: 768px) {
    #love .label {
        font-size: 25px;
    }
}
#love.ca-1 .square.red {
  left: 0;
  width: 100%;
  height: 50%;
}

#love.ca-1 .square.green {
  top: 50%;
  width: 50%;
  height: 50%;
}

#love.ca-1 .square.blue {
  top: 50%;
  width: 50%;
  height: 50%;
}

#love.ca-2 .square.red {
  top: 41.2%;
  left: 45%;
  width: 5%;
  height: 8.8%;
}

#love.ca-2 .square.green {
  top: 50%;
  right: 47.5%;
  width: 5%;
  height: 8.8%;
}

#love.ca-2 .square.blue {
  top: 41.2%;
  left: 50%;
  width: 5%;
  height: 8.8%;
}

#love.ca-3 .square.red {
  left: 44%;
  border-radius: 100px;
}

#love.ca-3 .square.green {
  background-color: red;
  right: 47.5%;
  top: 47.5%;
  transform: rotate(45deg);
}

#love.ca-3 .square.blue {
  left: 51%;
  background-color: red;
  border-radius: 100px;
}

#love.ca-4 .square.green:after {
  width: 60%;
}

#love.ca-4 .square.green:before {
  height: 60%;
}

#love.ca-4 .label {
  opacity: 1;
}

@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }

  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}
Season

HTML/CSS Ratios

<div id="canvas" class="canvas-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 (Canvas Animation)

$('#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 (Canvas Animation Editor)

$('#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>'
});