Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
121 lines (90 sloc) 3.43 KB
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>Wobble Window - jQuery Example 2</title>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'></script>
<script src='js/jquery.wobblewindow.min.js'></script>
<style type='text/css'>
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
vertical-align: baseline;
background: transparent;
box-sizing: border-box;
}
body {
overflow: hidden;
background-color: #CCC;
}
.clear {
clear: both;
height: 0;
font-size: 0;
line-height: 0;
}
#window {
width:350px;
height:350px;
left:65px;
top:65px;
position:absolute;
padding: 50px 50px 50px 50px;
pointer-events: none;
}
</style>
<script>
$( document ).ready( function() {
//------------------------------------------------------------------------
//Settings - params for WobbleWindow
var settings = {
name: 'window_1',
depth: 1,
offsetX: 0,
offsetY: 0,
moveTypeIn: 'move',
moveTypeOut: 'wobble',
wobbleFactor: 0.98,
wobbleSpeed: 0.05,
moveSpeed: 3,
lineWidth: 1,
lineColor: '',
bodyColor: '#FFF',
numberOfXPoints: 7,
numberOfYPoints: 5,
movementLeft: true,
movementRight: true,
movementTop: true,
movementBottom: true,
debug: true
};
//------------------------------------------------------------------------
//standalone
//init
var wobbleWindow = new WobbleWindow( document.getElementById( 'window' ), settings );
//------------------------------------------------------------------------
//jQuery
//init
//$( '#window' ).wobbleWindow( settings );
//------------------------------------------------------------------------
} );
</script>
</head>
<body>
<div id='holder' style='width:480px; height:480px; position:absolute; background-color: #7E9F35'>
<div id='window'>
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.
</div>
</div>
</body>