3 Demos of Creating Gooey Effect in HTML5 canvas by jQuery

Create gooey effect in HTML canvas

The light-weight jquery-wobblewindow-plugin can be used for creating the gooey effect on HTML5 canvas in your web pages.

The minified size is only 7K while cool animation happens as the mouse bring in and out of any specified HTML element.

Demo 1 Demo 2 Demo 3
Developer’s page Download plug-in

Installation

Install the plug-in by npm:

npm i jquery-wobblewindow-plugin

How to set up jQuery wobblewindow plug-in on your website?

Include the jQuery library and jquery.wobblewindow.min.js in the <head> section:

 <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js”></script>

<script src=’js/wobblewindow/jquery.wobblewindow.min.js’></script>

Initiate the plug-in

$(‘#window’).wobbleWindow();

The plug-in has a plenty of options that you may use to create the animations. See the demos below with the description of a few.

The markup

The markup can be any element in a webpage where you want to create gooey animation. The ID is referred in the jQuery code as shown in the demos below.

A demo of creating gooey animation in a div element

In this demo, a div element is created with dummy text. A little CSS is used to style and differentiate different sections. Bring the mouse over inner div element, particularly on edges to see the wobble effect:

jQuery gooey animation

See online demo and code

The markup for this demo:

    <div id='holder' style='width:510px; height:500px; position:absolute; background-color: #408080'>

 

        <div id='window'>

            <h1>A demo of gooey animation</h1>

            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac elementum tortor, eget efficitur quam. Quisque eu erat dui. Etiam ut mauris at dui feugiat eleifend id vel arcu. Praesent commodo orci quis scelerisque congue. Cras ac mauris quam. Nunc ipsum tortor, lobortis et arcu et, imperdiet maximus massa. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Ut aliquam pretium augue.

        </div>

 

    </div>

 

The jQuery code:

It used all default settings for different options, so just initiated the plug-in:

    <script>

 

        $( document ).ready( function() {

 

            $('#window').wobbleWindow();

 

                                } );

 

    </script>

 

The CSS for div elements:

        .clear {

            clear: both;

            height: 0;

            font-size: 0;

            line-height: 0;

        }

 

        #window {

            width:375px;

            height:375px;

            left:70px;

            top:70px;

            position:absolute;

            padding: 50px;

            background-color:#D1E9E9;

            pointer-events: none;

 

        }

 

Grab the complete code including the dependency files from the demo page.

A demo of using different options in animation

As mentioned earlier, the plug-in has a number of option that you may specify in the jQuery code for creating customized gooey effect as the mouse is in and out of the specified element.

A few of the options used in this demo are:

  • depth – that specified the depth of the z-index
  • offset and offsetY
  • wobbleSpeed // defines the wobble speed like elasticity
  • bodyColor //It defines the color of body of the element where effect is created
  • and many other

jQuery wooble animation

See online demo and code

Get the complete code from the demo page.

A demo with four squares

In this example, four different elements are specified where gooey animation is created with the different set of options and values.

jQuery animation multiple

See online demo and code

The jQuery code:

    <script>

 

        $( document ).ready( function() {

 

            //------------------------------------------------------------------------

 

            //Settings - params for WobbleWindow

            var settings1 = {

 

                wobbleFactor: 0.99,

                wobbleSpeed: 0.05,

                moveSpeed: 3,

                lineColor: '',

                bodyColor: '#EEE',

                movementLeft: true,

                movementRight: true,

                movementTop: true,

                movementBottom: true

 

            };

 

            var settings2 = {

 

                wobbleFactor: 0.99,

                wobbleSpeed: 0.05,

                moveSpeed: 3,

                lineColor: '#222',

                bodyColor: '#EEE',

                movementLeft: true,

                movementRight: true,

                movementTop: true,

                movementBottom: true

 

            };

 

            var settings3 = {

 

                wobbleFactor: 0.99,

                wobbleSpeed: 0.05,

                moveSpeed: 3,

                lineColor: '#222',

                bodyColor: '#EEE',

                movementLeft: true,

                movementRight: true,

                movementTop: true,

                movementBottom: true

 

            };

 

            var settings4 = {

 

                wobbleFactor: 0.99,

                wobbleSpeed: 0.05,

                moveSpeed: 3,

                lineColor: '',

                bodyColor: '#EEE',

                movementLeft: true,

                movementRight: true,

                movementTop: true,

                movementBottom: true

 

            };

 

            //------------------------------------------------------------------------

 

            //standalone

 

            //init

 

            var wobbleWindow1 = new WobbleWindow( document.getElementById( 'window1' ), settings1 );

            var wobbleWindow2 = new WobbleWindow( document.getElementById( 'window2' ), settings2 );

            var wobbleWindow3 = new WobbleWindow( document.getElementById( 'window3' ), settings3 );

            var wobbleWindow4 = new WobbleWindow( document.getElementById( 'window4' ), settings4 );

 

            //------------------------------------------------------------------------

 

            //jQuery

 

            //init

 

            // $( '#window1' ).wobbleWindow( settings1 );

            // $( '#window2' ).wobbleWindow( settings2 );

            // $( '#window3' ).wobbleWindow( settings3 );

            // $( '#window4' ).wobbleWindow( settings4 );

 

            //------------------------------------------------------------------------

 

                                } );

 

    </script>

 

The CSS

    <style type='text/css'>

 

        html, body, div, span, applet, object, iframe,

        h1, h2, h3, h4, h5, h6, p, blockquote, pre,

        a, abbr, acronym, address, big, cite, code,

        del, dfn, em, font, img, ins, kbd, q, s, samp,

        small, strike, strong, sub, sup, tt, var,

        b, u, i, center,

        dl, dt, dd, ol, ul, li,

        fieldset, form, label, legend,

        table, caption, tbody, tfoot, thead, tr, th, td {

            margin: 0;

            padding: 0;

            border: 0;

            outline: 0;

            font-size: 100%;

            vertical-align: baseline;

            background: transparent;

            box-sizing: border-box;

        }

 

        body {

            overflow: hidden;

            background-color: #CCC;

        }

 

        .clear {

            clear: both;

            height: 0;

            font-size: 0;

            line-height: 0;

        }

 

        #window1 {

            width:180px;

            height:180px;

            left:30px;

            top:30px;

            position:absolute;

            padding: 15px 15px 15px 15px;

            pointer-events: none;

        }

 

        #window2 {

            width:180px;

            height:180px;

            left:30px;

            top:30px;

            position:absolute;

            padding: 15px 15px 15px 15px;

            pointer-events: none;

        }

 

        #window3 {

            width:180px;

            height:180px;

            left:30px;

            top:30px;

            position:absolute;

            padding: 15px 15px 15px 15px;

            pointer-events: none;

        }

 

        #window4 {

            width:180px;

            height:180px;

            left:30px;

            top:30px;

            position:absolute;

            padding: 15px 15px 15px 15px;

            pointer-events: none;

        }

 

    </style>

 

Similarly, you may create animation in different parts of the same web page – all with different settings.

Learn more about the available options by visiting the plug-in page.