diff --git a/index.html b/index.html
index 0489e97..fda9a4b 100644
--- a/index.html
+++ b/index.html
@@ -22,8 +22,8 @@
 	<p id="console"></p>
 
 	<div class="scrollblock" id="intro">
-		<h1 id="title">scrollorama</h1>
-		<p id="author">
+		<h1 id="title" data-animate="true" data-duration="300" data-property="zoom" data-end="8">scrollorama</h1>
+		<p id="author" data-animate="true" data-duration="20" data-property="z-index" data-end="0">
 			created by <a href="http://twitter.com/johnpolacek">John Polacek</a>
 			<a href="https://twitter.com/johnpolacek" class="twitter-follow-button" data-show-count="false" data-size="large">Follow @johnpolacek</a>
 			<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
@@ -39,22 +39,26 @@ <h1 id="title">scrollorama</h1>
 
 	<div class="scrollblock" id="examples-transition">
 		<h2>Transitions</h2>
-		<h3 id="fade-in">Fade In</h3>
-		<h3 id="fly-in">Fly In</h3>
-		<h3 id="rotate-in">Rotate In</h3>
-		<h3 id="zoom-in">Zoom In</h3>
-		<p id="any"><small><span class="accent">&#9733;</span> Any numeric CSS property <span class="accent">&#9733;</span></small></p>
+		<h3 id="fade-in" data-animate="true" data-delay="400" data-duration="300" data-property="opacity" data-start="0">Fade In</h3>
+		<h3 id="fly-in" data-animate="true" data-delay="400" data-duration="300" data-property="left" data-start="-1400" data-end="0">Fly In</h3>
+		<h3 id="rotate-in" data-animate="true" data-duration="800" data-property="rotate" data-start="720">Rotate In</h3>
+		<h3 id="zoom-in" data-animate="true" data-delay="200" data-duration="600" data-property="zoom" data-start="8">Zoom In</h3>
+		<p id="any" data-animate="true" data-delay="700" data-duration="200" data-property="opacity" data-start="0">
+			<small data-animate="true" data-delay="800" data-duration="200" data-property="letter-spacing" data-start="18">
+				<span class="accent">&#9733;</span> Any numeric CSS property <span class="accent">&#9733;</span>
+			</small>
+		</p>
 	</div>
 	
 	<div class="scrollblock" id="examples-pin">
 		<h2>Pin It</h2>
-		<h3 id="unpin">&#9733; Then unpin it &#9733;</h3>
+		<h3 id="unpin" data-animate="true" data-duration="500" data-property="padding-top" data-start="400" data-pin="true">&#9733; Then unpin it &#9733;</h3>
 	</div>
 	
 	<div class="scrollblock" id="examples-parallax">
 		<h2 id="parallax1">Parallax</h2>
-		<h3 id="parallax2">Parallax</h3>
-		<h3 id="parallax3">Parallax</h3>
+		<h3 id="parallax2" data-animate="true" data-delay="400" data-duration="600" data-property="top" data-start="800" data-end="-800">Parallax</h3>
+		<h3 id="parallax3" data-animate="true" data-delay="200" data-duration="1200" data-property="top" data-start="500" data-end="-500">Parallax</h3>
 	</div>
 	
 	<div class="scrollblock" id="examples-easing">
@@ -81,34 +85,39 @@ <h1>How To Use</h1>
 scrollorama.animate('#example1',{
     duration:400, property:'opacity'
 })</pre></blockquote></p>
+			<p class="divider">&#9733; &#9733; &#9733;</p>
+			<p>Or specify data-animate="true" and data-* HTML5 attributes on that element.</p>
+			<p><blockquote><pre>
+&lt;div id="#example-1" data-animate="true" data-duration="400" data-property="opacity"&gt;&lt;/div&gt;
+</pre></blockquote></p>
 			<p id="instructions-animation">The animation parameters you can use are:</p>
 			<ul class="param-list">
 				<li>
-					<span class="param">duration</span>
+					<span class="param">duration (data-duration in HTML)</span>
 					<span class="param-def">number of pixels of scrolling the animation lasts</span>
 				</li>
 				<li>
-					<span class="param">delay</span>
+					<span class="param">delay (data-delay in HTML)</span>
 					<span class="param-def">number of pixels of scrolling before the animation starts<small>(animation is set to begin when the top of the scroll block is at the bottom of browser window)</small></span>
 				</li>
 				<li>
-					<span class="param">property</span>
+					<span class="param">property (data-property in HTML)</span>
 					<span class="param-def">css property being animated <small>(must be numeric)</small></span>
 				</li>
 				<li>
-					<span class="param">start</span>
+					<span class="param">start (data-start in HTML)</span>
 					<span class="param-def">value of the css property at the start of the animation <small>(if unassigned, will be the element&rsquo;s current property value)<br />(also can be a function that returns a value for dynamic heights)</small></span>
 				</li>
 				<li>
-					<span class="param">end</span>
+					<span class="param">end (data-end in HTML)</span>
 					<span class="param-def">value of the css property at the end of the animation <small>(if unassigned, will be the element&rsquo;s current property value)<br />(also can be a function that returns a value for dynamic heights)</small></span>
 				</li>
 				<li>
-					<span class="param">pin</span>
+					<span class="param">pin (data-pin in HTML)</span>
 					<span class="param-def">set to true if you want the scroll block to be pinned during its animations <small>(note: block will be pinned for all its element&rsquo;s animations)</small></span>
 				</li>
 				<li>
-					<span class="param">easing</span>
+					<span class="param">easing (data-easing in HTML)</span>
 					<span class="param-def">'bounce baby, bounce.' use the same easing equations you're used to.
 						<small>(if unassigned, will be a linear transition)</small></span>
 				</li>
@@ -148,7 +157,7 @@ <h1>Credits</h1>
 			
 			// initialize the plugin, pass in the class selector for the sections of content (blocks)
 			var scrollorama = $.scrollorama({ blocks:'.scrollblock' });
-			
+
 			// assign function to add behavior for onBlockChange event
 			scrollorama.onBlockChange(function() {
 				var i = scrollorama.blockIndex;
@@ -163,33 +172,13 @@ <h1>Credits</h1>
 				.css('display','block')
 				.css('float','left');
 			$('.char9').css('padding-left','6px');
-			
-			// animate the title letters to explode
-			scrollorama
-				.animate('#title',{ duration: 300, property:'zoom', end: 8 })
-				.animate('#author',{ duration: 10, property:'z-index', end: 0 });
-			
+
 			$('#title span').each(function() {
 				scrollorama
 					.animate($(this),{ duration: 400, property:'top', end: Math.random()*120-180 })
 					.animate($(this),{ duration: 300, property:'rotate', start:0, end:Math.random()*720-360 });
 			});
 			
-			// animate some examples
-			scrollorama
-				.animate('#unpin',{ duration:500, property:'padding-top', start:400, pin:true })
-				.animate('#fade-in',{ delay: 400, duration: 300, property:'opacity', start:0 })
-				.animate('#fly-in',{ delay: 400, duration: 300, property:'left', start:-1400, end:0 })
-				.animate('#rotate-in',{ duration: 800, property:'rotate', start:720 })
-				.animate('#zoom-in',{ delay: 200, duration: 600, property:'zoom', start:8 })
-				.animate('#any',{ delay: 700, duration: 200, property:'opacity', start:0 })
-				.animate('#any',{ delay: 800, duration: 200, property:'letter-spacing', start:18 });
-			
-			// animate the parallaxing
-			scrollorama
-				.animate('#parallax2',{ delay: 400, duration: 600, property:'top', start:800, end:-800 })
-				.animate('#parallax3',{ delay: 200, duration: 1200, property:'top', start:500, end:-500 });
-			
 			// animate some easing examples
 			var $easing = $('#easing'),
 				$clone = $easing.clone().appendTo('#examples-easing')
@@ -226,4 +215,4 @@ <h1>Credits</h1>
 
 	</script>
 
-</body></html>
\ No newline at end of file
+</body></html>
diff --git a/js/jquery.scrollorama.js b/js/jquery.scrollorama.js
index 6c42d25..53e602c 100644
--- a/js/jquery.scrollorama.js
+++ b/js/jquery.scrollorama.js
@@ -408,7 +408,27 @@
 		};
 		
 		init();
-		
+
+		scrollorama.settings.blocks.find('*[data-animate]').each(
+			function() {
+				var element = $(this);
+				if ($.trim(element.attr('data-animate')).toLowerCase() === 'true') {
+					scrollorama.animate(
+						element,
+						{
+							duration: element.attr('data-duration') ? parseInt(element.attr('data-duration')) : undefined,
+							delay: element.attr('data-delay') ? parseInt(element.attr('data-delay')) : undefined,
+							property: element.attr('data-property'),
+							start: element.attr('data-start') ? (isNaN(element.attr('data-start')) ? element.attr('data-start') : parseInt(element.attr('data-start'))) : undefined,
+							end: element.attr('data-end') ? (isNaN(element.attr('data-end')) ? element.attr('data-end') : parseInt(element.attr('data-end'))) : undefined,
+							pin: element.attr('data-pin') ? (($.trim(element.attr('data-pin').toLowerCase()) === 'true') ? true : false) : undefined,
+							easing: element.attr('data-easing')
+						}
+					);
+				}
+			}
+		);
+
 		return scrollorama;
     };
 
@@ -588,4 +608,4 @@ function uaMatch(ua) {
 		browser: match[ 1 ] || "",
 		version: match[ 2 ] || "0"
 	};
-}
\ No newline at end of file
+}