Create Interactive Gooey Effects In jQuery - Wobble Window

Create Interactive Gooey Effects In jQuery - Wobble Window
File Size: 24.1 KB
Views Total: 2623
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

Wobble Window is a fancy jQuery plugin that helps you create a cool, interactive, configurable, HTML5 canvas based gooey effect when the mouse moves in/out a specified element.

How to use it:

1. Load the latest version of jQuery library and the jQuery Wobble Window plugin's script in the html file.

<script src="//"></script>
<script src='js/jquery.wobblewindow.min.js'></script>

2. Initialize the plugin on the target container element and done.


3. Possible plugin options with default values.


  // window name
  name: 'window_1',

  // depth
  depth: 1,

  // x/y offsets of the div
  offsetX: 0,
  offsetY: 0,

  // method points follow the mouse
  moveTypeIn: 'move',

  // method points go back to init position
  moveTypeOut: 'wobble',

  // options for the wobble effect
  wobbleFactor: 0.9
  wobbleSpeed: 0.1,
  moveSpeed: 3,

  // line width
  lineWidth: 1,

  // line color
  lineColor: '',

  // body color
  bodyColor: '#FFF',

  // number of x/y points
  numberOfXPoints: 7,
  numberOfYPoints: 5,//quantity of points vertical. must be an odd int

  // enable/disable movement directions
  movementLeft: true,
  movementRight: true,
  movementTop: true,
  movementBottom: true,

  // debug mode
  debug: false


Change log:


  • JS update.
  • Added more examples.

About Author:

Author: Niklas Knaack


This awesome jQuery plugin is developed by NiklasKnaack. For more Advanced Usages, please check the demo page or visit the official website.