jQuery Google Wobble Window Plugin jquery-wobblewindow-plugin

Add-ons

2026-08-03 13:16 9 次浏览 • 0 次下载 10.7KB

jQuery Google Wobble Window Plugin jquery-wobblewindow-plugin

Plugin Description: This is a jQuery plugin that creates wobbling windows with a gooey effect. Based on HTML5 Canvas, this gooey wobble window effect creates wave-like distortions along the borders when the mouse enters or leaves an HTML element.

Wobble window jQuery plugin

This is a jQuery plugin that creates wobbling windows with a gooey effect. Based on HTML5 Canvas, this gooey wobble window effect creates wave-like distortions along the borders when the mouse enters or leaves an HTML element.

Usage

Include the jquery and jquery.wobblewindow.min.js files in your page.

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

HTML Structure

Set the following HTML structure for the HTML element where you want to create the wobble window effect:

<!--Wrapper element-->               
<div id='holder' style='width:480px; height:480px; position:relative; background-color: #562A72'>
    <!--Wobble window element-->
    <div id='window'>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce ac elementum tortor, eget efficitur quam. 
    </div>
</div>

CSS Styles

Set the following CSS styles for the wobble window element:

#window {
    width:350px; 
    height:350px; 
    left:65px; 
    top:65px; 
    position:absolute;
    padding: 50px 50px 50px 50px;
    pointer-events: none;
}

Initialize the Plugin

After the page DOM elements have finished loading, initialize the plugin using the wobbleWindow() method.

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

You can also call the plugin using pure JavaScript:

var wobbleWindow = new WobbleWindow( document.getElementById( 'window' ) ); 
// With configuration parameters
var wobbleWindow = new WobbleWindow( document.getElementById( 'window' ), settings );

Configuration Parameters

The available configuration parameters for this wobble window effect plugin are as follows:

var settings = {
    name: 'window_1',//name
    depth: 1,// Depth as zIndex
    offsetX: 0,// Size of the div with a + or - value
    offsetY: 0,// Size of the div with a + or - value
    moveTypeIn: 'move',// Control points follow the mouse
    moveTypeOut: 'wobble',// Control points return to their initial positions
    wobbleFactor: 0.9,// Control the wobble effect
    wobbleSpeed: 0.1,// Control the wobble speed
    moveSpeed: 3,// Control the movement speed
    lineWidth: 1,// Line width
    lineColor: '',// No value = no line or a hexadecimal value
    bodyColor: '#FFF',/No value = no body color or a hexadecimal value
    numberOfXPoints: 7,// Number of horizontal points. Must be an odd integer
    numberOfYPoints: 5,// Number of vertical points. Must be an odd integer
    movementLeft: true,// If true, points on the left can move
    movementRight: true,// If true, points on the right can move
    movementTop: true,// If true, points at the top can move
        movementBottom: true,// If true, points at the bottom can move
    debug: false// If true, debug mode is enabled
};
$( '#window' ).wobbleWindow( settings );