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
JSFiddle
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
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.
CSS
jQuery
;
With parameters:
var settings = name: 'my_window'//name depth: 1//depth for zIndex offsetX: 0//+ or - value the size of the div offsetY: 0//+ or - value the size of the div moveTypeIn: 'move'//method points follow the mouse moveTypeOut: 'wobble'//method points go back to init position wobbleFactor: 09//control the wobble effect wobbleSpeed: 01//control the wobble speed moveSpeed: 3//control the move speed lineWidth: 1//lineWidth lineColor: ''//no value = no line. Use hex/rgba values bodyColor: '#FFF'//no value = no body color. Use hex/rgba values numberOfXPoints: 7//quantity of points horizontal. must be an odd int numberOfYPoints: 5//quantity of points vertical. must be an odd int movementLeft: true//enable/disable movement directions movementRight: true//enable/disable movement directions movementTop: true//enable/disable movement directions movementBottom: true//enable/disable movement directions autoResize: true//if true size will be automatically adjusted autoResize: true//enable/disable automatic size adjustement debug: false//enable/disable debug mode ;
;
JS
var wobbleWindow = document ;
With parameters:
var wobbleWindow = document settings ;
Notes
- Make sure you never use duplicated IDs in your DOM
License
This plugin is available under the MIT license.
Author
– Niklas