JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://jackrugile.com/jrumble/js/jquery.jrumble.1.3.min.js"></script>
<table id="content">
<tr valign="top">
<!-- colspan = amount of rows below -->
<td colspan="3">
<div id="welcome">
Welcome
</div>
</td>
</tr>
<tr valign="bottom">
<td>
</td>
<td>
<div id="cv">
CV
</div>
</td>
<td>
</td>
</tr>
</table>
<!-- SHAKE EFFECT -->
<script>
$(function() {
// ADD ID'S HERE
$('#about, #contact').jrumble();
$('#cv').jrumble({
x: 0,
y: 0,
rotation: 5
});
// ACTIVATE ID'S HERE
$('#about, #contact, #cv').hover(function() {
$(this).trigger('startRumble');
}, function() {
$(this).trigger('stopRumble');
});
});
</script>
<!-- END SHAKE EFFECT -->
</body>
</html>
CSS
/*
Document : style
Created on : Aug 23, 2013, 10:39:25 AM
Author : Jan-Willem
Description:
Purpose of the stylesheet follows.
*/
html, body {
height:100%;
width: 100%;
background-image:url('../img/background.jpg');
background-position: center top;
background-repeat: no-repeat;
background-attachment: scroll;
display: block;
background-color: #1a1207;
/* add font here */
color: white;
}
tr{
height: 33%;
}
#content {
height:100%;
width: 100%;
border-collapse:collapse;
}
#welcome{
margin-top: 50px;
text-align: center;
}
#absolute{
position: absolute;
}
#cv{
margin-bottom: 50px;
text-align: center;
}