Create Interactive Gooey Effects In jQuery - Wobble Window

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="//code.jquery.com/jquery-3.2.0.slim.min.js"></script>
<script src='js/jquery.wobblewindow.min.js'></script>

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

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

3. Possible plugin options with default values.

$('#element').wobbleWindow({

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

2017-04-07

• JS update.
• Added more examples.

About Author:

Author: Niklas Knaack

Website: http://blog.niklasknaack.de/2017/04/wobble-window-jquery-plugin.html

---

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