Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Initial commit of bounceThis

  • Loading branch information...
commit 6ce9a3cce5535f12edfb926518e179e37cb9ae41 0 parents
authored December 03, 2012
BIN  img/bg.jpg
BIN  img/logo.png
86  index.html
... ...
@@ -0,0 +1,86 @@
  1
+<!DOCTYPE html>
  2
+<html>
  3
+<head>
  4
+	<meta charset="UTF-8">
  5
+	<title>bounceThis by @toddmotto | toddmotto.com</title>
  6
+	<meta name="author" content="@toddmotto">
  7
+
  8
+	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
  9
+	<script src="js/bouncethis.min.js"></script>
  10
+	<script>
  11
+	$(function() {
  12
+		$('#header').bounceThis({
  13
+			bounceHeight  : '20px',
  14
+			dropDownSpeed : 300,
  15
+			delay         : 200
  16
+		});
  17
+	});
  18
+	</script>
  19
+</head>
  20
+
  21
+<body>
  22
+	<div id="header">
  23
+		<div id="logo">
  24
+			<a href="http://www.toddmotto.com">
  25
+				<img src="img/logo.png" alt="Logo">
  26
+			</a>
  27
+		</div>
  28
+		<div id="view-tut">
  29
+			<ul>
  30
+				<li><a href="http://www.toddmotto.com/bouncethis-plugin-for-bouncing-header-animations">Visit the Tutorial</a></li>
  31
+			</ul>
  32
+		</div>
  33
+	</div>
  34
+	
  35
+	<div class="wrapper">
  36
+		<div id="main">
  37
+		
  38
+			<div class="calling">
  39
+				<h1>Calling the function via: Document Ready</h1>
  40
+				<a href="#" class="reload">Reload/watch demo again</a>
  41
+			</div>
  42
+		</div>
  43
+	</div>
  44
+	
  45
+	<!-- Styles (Demo only) -->
  46
+	<style>
  47
+		* {margin:0;padding:0;}
  48
+		a img {border:none;}
  49
+		a {text-decoration:none;}
  50
+		body {font:400 12px/1.625 "Helvetica Neue", Helvetica, Arial, sans-serif;-webkit-font-smoothing:antialiased;-moz-font-smoothing:antialiased;
  51
+		-o-font-smoothing:antialiased;font-smoothing:antialiased;text-rendering:optimizeLegibility;color:#444;background:url(img/bg.jpg) no-repeat;background-size:cover;}
  52
+		.wrapper {max-width:1000px;width:95%;margin:0 auto;position:relative;}
  53
+		#header {overflow:auto;background:#33363C;border-top:5px solid #2F3135;border-bottom:2px solid #04A4CC;}
  54
+		#logo {float:left;margin:10px 50px 5px;}
  55
+		#logo img {width:80px;height:36px;}
  56
+		#view-tut {float:right;font-size:13px;font-weight:900;margin:10px 50px 5px;}
  57
+		#view-tut ul {margin:0;}
  58
+		#view-tut ul li {display:inline-block;*display:inline;zoom:1;margin:0 5px 0 0;}
  59
+		#view-tut ul li a {display:block;padding:5px 10px;background:#04A4CC;color:#FFF;border-radius:20px;}
  60
+		#view-tut ul li a:hover {background:#0097CD;}
  61
+		#main {margin:120px auto;text-align:center;}
  62
+		#main p {padding:0;margin:10px 0 0;}
  63
+		#main .calling {background:#FFF;color:#222;padding:15px 20px;display:inline-block;border-radius:6px;box-shadow:0 1px 3px #000;}
  64
+		#main .calling a {display:inline-block;background:#333;color:#FFF;padding:10px 20px;margin:5px;border-radius:4px;}
  65
+	</style>
  66
+	
  67
+	<!-- Analytics (Demo only) -->
  68
+	<script>
  69
+		var _gaq=[['_setAccount','UA-20440416-10'],['_trackPageview']];
  70
+		(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
  71
+		g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
  72
+		s.parentNode.insertBefore(g,s)}(document,'script'));
  73
+	</script>
  74
+	
  75
+	<!-- Influads Script (Demo only) -->
  76
+	<script src="http://www.toddmotto.com/influads/custom.js?=influads"></script>
  77
+	
  78
+	<script>
  79
+	$('.reload').click(function() {
  80
+		location.reload();
  81
+		return false;
  82
+	});
  83
+	</script>
  84
+	
  85
+</body>
  86
+</html>
80  js/bouncethis.js
... ...
@@ -0,0 +1,80 @@
  1
+/*
  2
+	Bounce(this) v1.0.0
  3
+	by Todd Motto: http://www.toddmotto.com
  4
+	Latest version: https://github.com/toddmotto/bounceThis
  5
+
  6
+	BounceThis jQuery Plugin, super simple bouncing headers.
  7
+*/
  8
+;(function($) {
  9
+		
  10
+	$.fn.bounceThis = function (options) {
  11
+		
  12
+		// Create our default settings
  13
+		var settings = {
  14
+			bounceHeight: '20px',
  15
+			dropDownSpeed: 300,
  16
+			delay: 200
  17
+		};
  18
+		
  19
+		// Load our settings
  20
+		if(options) {
  21
+			$.extend(settings, options);
  22
+		}
  23
+		
  24
+		// Run it, run it
  25
+		return this.each(function () {
  26
+		
  27
+			// Create a variable for $(this)
  28
+			var $this = $(this),
  29
+			
  30
+				// Grab our item's height, passing 'true' on outerHeight includes margins
  31
+				itemheight = $this.outerHeight(true);
  32
+				
  33
+			// Wrap the targeted element in a <div>
  34
+			// This allows us to use absolute positioning
  35
+			// On the child without losing the element's natural height
  36
+			$this.wrap('<div class="bounceThis" />');
  37
+			
  38
+			// Target our newly created element, give it the exact height as the targeted element
  39
+			// We do this to mimic it's physical space when animating
  40
+			// Position it relative, to setup more relative positioning on the child element
  41
+			$('.bounceThis').css({
  42
+				height: itemheight,
  43
+				position: 'relative'
  44
+			});
  45
+			
  46
+			// Hide the element
  47
+			$this.hide();
  48
+			
  49
+			// Remove from view whilst hidden, equivalent to element height
  50
+			$this.animate({
  51
+				top: "-" + itemheight
  52
+			},
  53
+				// After negative animation on the invisible element, add position relative
  54
+				// Show the element to make it visible again, but offscreen still
  55
+				function () {
  56
+					$(this).css({
  57
+						position: 'relative'
  58
+					}).show();
  59
+				}
  60
+			);
  61
+			
  62
+			// Delay by user settings
  63
+			// Animate at the declared bounceHeight
  64
+			$this.delay(settings.delay).animate({
  65
+				top: settings.bounceHeight
  66
+			},
  67
+			
  68
+			// Animate it at our declared dropDownSpeed
  69
+			// This speed applies to both animations
  70
+			settings.dropDownSpeed,
  71
+
  72
+			// Run the last animation to bring it to the top again
  73
+			function () {
  74
+				$this.animate({
  75
+					top: 0
  76
+				});
  77
+			});
  78
+		});
  79
+	};
  80
+})(jQuery);
8  js/bouncethis.min.js
... ...
@@ -0,0 +1,8 @@
  1
+/*
  2
+	Bounce(this) v1.0.0
  3
+	by Todd Motto: http://www.toddmotto.com
  4
+	Latest version: https://github.com/toddmotto/bounceThis
  5
+
  6
+	BounceThis jQuery Plugin, super simple bouncing headers.
  7
+*/
  8
+;(function(e){e.fn.bounceThis=function(t){var n={bounceHeight:"20px",dropDownSpeed:300,delay:200};if(t){e.extend(n,t)}return this.each(function(){var t=e(this),r=t.outerHeight(true);t.wrap('<div class="bounceThis" />');e(".bounceThis").css({height:r,position:"relative"});t.hide();t.animate({top:"-"+r},function(){e(this).css({position:"relative"}).show()});t.delay(n.delay).animate({top:n.bounceHeight},n.dropDownSpeed,function(){t.animate({top:0})})})}})(jQuery);
6  license.txt
... ...
@@ -0,0 +1,6 @@
  1
+========================
  2
+
  3
+Created by Todd Motto
  4
+toddmotto.com/licensing
  5
+
  6
+========================

0 notes on commit 6ce9a3c

Please sign in to comment.
Something went wrong with that request. Please try again.