Wine Animation

Wine Animation is a jQuery plugin that transform a HTML5 canvas element into configurable wine animation using CreateJS library.

DEMOS

FEATURES

Works Great on any Device (Desktop, Tablet, Mobile).
Ready to use with assets included.
Easy to replace your own assets.
Adjustable color, position, speed, for each bottle or glasses.
All options, methods and events are documented.
Make with CreateJS

HOW TO USE

Step 1: Link required files

                            
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/jquery-ui.min.js"></script>
    <script src="js/createjs.min.js"></script>
    <script src="js/wine-animation.js"></script>

Step 2: HTML markup

                            
	<canvas id="wineHolder" width="150" height="500"></canvas>

Step 3: Call the JS

                            
   $('#wineHolder').wineAnimation({
        image:'assets/wine_bottle.png',
        wineColour:'#330606',
        wineStartY:480,
        wineHeight:372,
        wineLevel:70
    });

MASKING

If you wish to have transparent background for the canvas, you can use the tools below to draw masking shape of wine fill area.

Drag and move the point to adjust the masking shape, copy the output array and past into plugins option maskPath.

Point X:
Point Y:
Curve Point X:
Curve Point Y:

Wine Animation

Wine Animation is a jQuery plugin that transform a HTML5 canvas element into configurable wine animation using CreateJS library.

MAKE BY demonisblack