Wobble window jQuery plugin

(jquery-wobblewindow-plugin)

Description

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.

Demo & Examples

Demos

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

JSFiddle

• https://jsfiddle.net/NiklasKnaack/u0ozajc5/
• https://jsfiddle.net/NiklasKnaack/mzvthxLc/

More Examples

• http://nkunited.de/jquery/plugins/wobblewindow/example1.html
• http://nkunited.de/jquery/plugins/wobblewindow/example2.html
• http://nkunited.de/jquery/plugins/wobblewindow/example3.html
• http://nkunited.de/jquery/plugins/wobblewindow/example4.html
• http://nkunited.de/jquery/plugins/wobblewindow/example5.html
• http://nkunited.de/jquery/plugins/wobblewindow/example6.html
• http://nkunited.de/jquery/plugins/wobblewindow/example7.html
• http://nkunited.de/jquery/plugins/wobblewindow/example8.html

Installation

install it through npm:

npm i jquery-wobblewindow-plugin

Example Usage

HTML

1<div id='window'>
2    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.
3</div>

CSS

1#window {
2    width:350px; 
3    height:350px; 
4    left:65px; 
5    top:65px; 
6    position:absolute;
7    padding: 50px 50px 50px 50px;
8    pointer-events: none;
9    box-sizing: border-box;
10}

jQuery

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

With parameters:

1var settings = {
2
3    name: 'my_window',//name
4    depth: 1,//depth for zIndex
5    offsetX: 0,//+ or - value the size of the div
6    offsetY: 0,//+ or - value the size of the div
7    moveTypeIn: 'move',//method points follow the mouse
8    moveTypeOut: 'wobble',//method points go back to init position
9    wobbleFactor: 0.9,//control the wobble effect
10    wobbleSpeed: 0.1,//control the wobble speed
11    moveSpeed: 3,//control the move speed
12    lineWidth: 1,//lineWidth
13    lineColor: '',//no value = no line. Use hex/rgba values
14    bodyColor: '#FFF',//no value = no body color. Use hex/rgba values
15    numberOfXPoints: 7,//quantity of points horizontal. must be an odd int
16    numberOfYPoints: 5,//quantity of points vertical. must be an odd int
17    movementLeft: true,//enable/disable movement directions
18    movementRight: true,//enable/disable movement directions
19    movementTop: true,//enable/disable movement directions
20    movementBottom: true,//enable/disable movement directions
21    autoResize: true,//if true size will be automatically adjusted
22    autoResize: true,//enable/disable automatic size adjustement
23    debug: false//enable/disable debug mode
24
25};

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

JS

1var wobbleWindow = new WobbleWindow( document.getElementById( 'window' ) );

With parameters:

1var wobbleWindow = new WobbleWindow( document.getElementById( 'window' ), settings );

Notes

• Make sure you never use duplicated IDs in your DOM

License

This plugin is available under the MIT license.

Author

– Niklas