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:
See online demo and code
The markup for this demo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<script> $( document ).ready( function() { $('#window').wobbleWindow(); } ); </script> |
The CSS for div elements:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
.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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 |
<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.