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:
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
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.
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.