Permalink
Find file
Fetching contributors…
Cannot retrieve contributors at this time
86 lines (77 sloc) 2.84 KB
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>bounceThis by @toddmotto | toddmotto.com</title>
<meta name="author" content="@toddmotto">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/bouncethis.min.js"></script>
<script>
$(function() {
$('#header').bounceThis({
bounceHeight : '20px',
dropDownSpeed : 300,
delay : 200
});
});
</script>
</head>
<body>
<div id="header">
<div id="logo">
<a href="http://www.toddmotto.com">
<img src="img/logo.png" alt="Logo">
</a>
</div>
<div id="view-tut">
<ul>
<li><a href="http://www.toddmotto.com/bouncethis-plugin-for-bouncing-header-animations">Visit the Tutorial</a></li>
</ul>
</div>
</div>
<div class="wrapper">
<div id="main">
<div class="calling">
<h1>Calling the function via: Document Ready</h1>
<a href="#" class="reload">Reload/watch demo again</a>
</div>
</div>
</div>
<!-- Styles (Demo only) -->
<style>
* {margin:0;padding:0;}
a img {border:none;}
a {text-decoration:none;}
body {font:400 12px/1.625 "Helvetica Neue", Helvetica, Arial, sans-serif;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;font-smoothing:antialiased;text-rendering:optimizeLegibility;color:#444;background:url(img/bg.jpg) no-repeat;background-size:cover;}
.wrapper {max-width:1000px;width:95%;margin:0 auto;position:relative;}
#header {overflow:auto;background:#33363C;border-top:5px solid #2F3135;border-bottom:2px solid #04A4CC;}
#logo {float:left;margin:10px 50px 5px;}
#logo img {width:80px;height:36px;}
#view-tut {float:right;font-size:13px;font-weight:900;margin:10px 50px 5px;}
#view-tut ul {margin:0;}
#view-tut ul li {display:inline-block;*display:inline;zoom:1;margin:0 5px 0 0;}
#view-tut ul li a {display:block;padding:5px 10px;background:#04A4CC;color:#FFF;border-radius:20px;}
#view-tut ul li a:hover {background:#0097CD;}
#main {margin:120px auto;text-align:center;}
#main p {padding:0;margin:10px 0 0;}
#main .calling {background:#FFF;color:#222;padding:15px 20px;display:inline-block;border-radius:6px;box-shadow:0 1px 3px #000;}
#main .calling a {display:inline-block;background:#333;color:#FFF;padding:10px 20px;margin:5px;border-radius:4px;}
</style>
<!-- Analytics (Demo only) -->
<script>
var _gaq=[['_setAccount','UA-20440416-10'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
<!-- Influads Script (Demo only) -->
<script src="http://www.toddmotto.com/influads/custom.js?=influads"></script>
<script>
$('.reload').click(function() {
location.reload();
return false;
});
</script>
</body>
</html>