for now, emit a keyframe-event on the skrollr instance instead of on …

…the DOM elements (I hate IE)

index.html

@@ -18,14 +18,14 @@
 
 	<div id="progress" data-0="width:0%;background:hsl(200, 100%, 50%);" data-end="width:100%;background:hsl(920, 100%, 50%);"></div>
 
-	<div id="intro" data-0="opacity:1;top:3%;transform:rotate(0deg);transform-origin:0 0;" data-500="opacity:0;top:-10%;transform:rotate(-90deg);" data-emit-events>
+	<div id="intro" data-0="opacity:1;top:3%;transform:rotate(0deg);transform-origin:0 0;" data-500="opacity:0;top:-10%;transform:rotate(-90deg);">
 		<h1><a href="https://github.com/Prinzhorn/skrollr">skrollr</a></h1>
 		<h2>parallax scrolling for the masses</h2>
 		<p>let's get scrollin' ;-)</p>
 		<p class="arrows">▼&nbsp;▼&nbsp;▼</p>
 	</div>
 
-	<div id="transform" data-500="transform:scale(0) rotate(0deg);" data-1000="transform:scale(1) rotate(1440deg);opacity:1;" data-1600="" data-1700="transform:scale(5) rotate(3240deg);opacity:0;" data-emit-events>
+	<div id="transform" data-500="transform:scale(0) rotate(0deg);" data-1000="transform:scale(1) rotate(1440deg);opacity:1;" data-1600="" data-1700="transform:scale(5) rotate(3240deg);opacity:0;">
 		<h2>transform</h2>
 		<p>scale, skew and rotate the sh** out of any element</p>
 	</div>
@@ -64,11 +64,9 @@ <h2>the end</h2>
 
 	<div id="scrollbar" data-0="top:0%;margin-top:2px;" data-end="top:100%;margin-top:-52px;"></div>
 
-	<script type="text/javascript" src="src/skrollr.js"></script>
+	<script type="text/javascript" src="dist/skrollr.min.js"></script>
 
-	<!--[if lt IE 9]>
-	<script type="text/javascript" src="dist/skrollr.ie.min.js"></script>
-	<![endif]-->
+	<script type="text/javascript" src="../skrollr-ie/dist/skrollr.ie.min.js"></script>
 
 	<script type="text/javascript">
 	var s = skrollr.init({

src/skrollr.js

@@ -248,7 +248,10 @@
 			beforerender: options.beforerender,
 
 			//Function to be called right after finishing rendering.
-			render: options.render
+			render: options.render,
+
+			//Function to be called whenever an element with the `data-emit-events` attribute passes a keyframe.
+			keyframe: options.keyframe
 		};
 
 		//forceHeight is true by default
@@ -406,7 +409,7 @@
 					//Point back to the element as well.
 					element: el,
 					//The name of the event which this keyframe will fire, if emitEvents is
-					eventType: 'skrollr.' + attr.name.replace(rxCamelCase, rxCamelCaseFn)
+					eventType: attr.name.replace(rxCamelCase, rxCamelCaseFn)
 				};
 
 				keyFrames.push(kf);
@@ -940,15 +943,15 @@
 
 					//This handles the special case where we exit the first keyframe.
 					if(emitEvents && lastFrameIndex > -1) {
-						_emitEvent(element, firstFrame.eventType + '.' + _direction);
+						_emitEvent(element, firstFrame.eventType, _direction);
 						skrollable.lastFrameIndex = -1;
 					}
 				} else {
 					_updateClass(element, [SKROLLABLE_AFTER_CLASS], [SKROLLABLE_BEFORE_CLASS, SKROLLABLE_BETWEEN_CLASS]);
 
 					//This handles the special case where we exit the last keyframe.
 					if(emitEvents && lastFrameIndex < framesLength) {
-						_emitEvent(element, lastFrame.eventType + '.' + _direction);
+						_emitEvent(element, lastFrame.eventType, _direction);
 						skrollable.lastFrameIndex = framesLength;
 					}
 				}
@@ -1017,9 +1020,9 @@
 						//Did we pass a new keyframe?
 						if(lastFrameIndex !== keyFrameIndex) {
 							if(_direction === 'down') {
-								_emitEvent(element, left.eventType + '.' + _direction);
+								_emitEvent(element, left.eventType, _direction);
 							} else {
-								_emitEvent(element, right.eventType + '.' + _direction);
+								_emitEvent(element, right.eventType, _direction);
 							}
 
 							skrollable.lastFrameIndex = keyFrameIndex;
@@ -1478,8 +1481,10 @@
 		_registeredEvents = [];
 	};
 
-	var _emitEvent = function(element, name) {
-		window.console.log(name);
+	var _emitEvent = function(element, name, direction) {
+		if(_listeners.keyframe) {
+			_listeners.keyframe.call(_instance, element, name, direction);
+		}
 	};
 
 	var _reflow = function() {