Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

We’re showing branches in this repository, but you can also compare across forks.

base fork: iamntz/jQuery-keyframe
base: 4aac8abf76
...
head fork: iamntz/jQuery-keyframe
compare: b5ee35458b
  • 2 commits
  • 4 files changed
  • 0 commit comments
  • 1 contributor
4 README.md
View
@@ -1,4 +1,4 @@
-jQuery-keyframe
+jQuery keyframe
===============
-jQuery keyframe
+[More info](http://www.iamntz.com/3157/frontend-developer/css-keyframe-based-events/)
80 index.html
View
@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <title>title</title>
+ <meta charset="utf-8" />
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+
+ <style type="text/css" media="screen">
+ #myElement {
+ width:100px;
+ height:100px;
+ line-height:100px;
+ text-align:center;
+ background:#ccc;
+ position:absolute;
+ left:0;
+ }
+
+ .ani {
+ -webkit-animation-duration: 10s;
+ animation-duration: 10s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+ }
+
+ @-webkit-keyframes foo {
+ 0% { left:0; }
+ 25% { left: 150px; background:#c00; }
+ 90% { left:500px; background:#0c0; }
+ 100% {left:0;background:#00c; color:#fff; }
+ }
+
+ .foo {
+ -webkit-animation-name: foo;
+ animation-name: foo;
+ }
+
+ </style>
+ </head>
+ <body>
+ <div id="wrap">
+ Works only on Chrome. Check out the console for extra stuff
+ <div id="myElement">
+ click me!
+ </div>
+ </div><!--/wrap-->
+
+ <script src="http://code.jquery.com/jquery-latest.min.js"></script>
+
+ <script src="js/libs/request_animation_frame.js"></script>
+ <script src="js/jQuery.keyframe.js"></script>
+
+ <script type="text/javascript">
+ var el = $('#myElement');
+ el.live('webkitAnimationEnd webkitAnimationStart keyframe', function(e){
+ switch( e.type ){
+ case 'webkitAnimationEnd':
+ // end event
+ el.removeClass('foo').text('click me')
+ console.log('Animation ended');
+ break;
+ case 'webkitAnimationStart':
+ // start event
+ console.log('Animation started');
+ break;
+ case 'keyframe':
+ // trigger event
+ el.text( 'progress: ' + e.originalEvent.percent + '%' );
+ break;
+ }
+ });
+ el.keyframe(); // plugin init
+
+ el.on('click', function(){
+ $(this).addClass('ani foo'); // css animation
+ })
+ </script>
+
+ </body>
+</html>
56 js/jQuery.keyframe.js
View
@@ -0,0 +1,56 @@
+(function($, window, document){
+ function createEvent( element, animationKey ) {
+ var event = document.createEvent("Event");
+ event.initEvent("keyframe", true, true);
+ event.animationName = 'keyframe';
+ event.keyText = 'keyframe';
+ event.percent = animationKey;
+ element.dispatchEvent(event);
+ };
+
+ $.fn.keyframe = function() {
+ return this.each(function(index, elem){
+ var reqAniFrame, startTime, endTime, duration,
+ keyframesHistory = {}, // some kind of buffer
+ cycle = 1;
+
+ function keyframes ( timestamp ) {
+ var key = Math.floor( ( timestamp - startTime ) / duration * 100 );
+
+ if( !keyframesHistory[key] && ( ( ( key % 5 ) +5 ) % 5 ) == 0 ){
+ keyframesHistory[key] = true;
+ createEvent( elem, key )
+ }
+
+ cycle = cycle+1;
+ reqAniFrame = window.requestAnimationFrame( keyframes );
+ };//keyframes
+
+ $(elem)
+ .unbind( 'webkitAnimationEnd.ntz webkitAnimationStart.ntz' )
+ .bind( 'webkitAnimationEnd.ntz webkitAnimationStart.ntz', function(e){
+ var t = $(this);
+ if( e.type == 'webkitAnimationStart' ){
+ var allStyles = document.defaultView.getComputedStyle( t[0], null ),
+ found = false;
+
+ for( var i = 0, len = allStyles.length; i < len; i++ ){
+ if( found ) { continue; }
+ if( allStyles[i].search("-animation-duration") >= 0 ){
+ duration = 1000 * parseFloat( allStyles.getPropertyValue( allStyles[i] ) );
+ found = true;
+ }
+ }
+
+ startTime = new Date().getTime();
+ endTime = startTime+duration;
+ reqAniFrame = window.requestAnimationFrame( keyframes );
+
+ }else{
+ window.cancelAnimationFrame( reqAniFrame );
+ }
+ });
+
+ });
+ };
+})(jQuery, window, document);
31 js/libs/request_animation_frame.js
View
@@ -0,0 +1,31 @@
+
+// http://paulirish.com/2011/requestanimationframe-for-smart-animating/
+// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
+
+// requestAnimationFrame polyfill by Erik Möller
+// fixes from Paul Irish and Tino Zijdel
+
+(function() {
+ var lastTime = 0;
+ var vendors = ['ms', 'moz', 'webkit', 'o'];
+ for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
+ window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
+ window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
+ || window[vendors[x]+'CancelRequestAnimationFrame'];
+ }
+
+ if (!window.requestAnimationFrame)
+ window.requestAnimationFrame = function(callback, element) {
+ var currTime = new Date().getTime();
+ var timeToCall = Math.max(0, 16 - (currTime - lastTime));
+ var id = window.setTimeout(function() { callback(currTime + timeToCall); },
+ timeToCall);
+ lastTime = currTime + timeToCall;
+ return id;
+ };
+
+ if (!window.cancelAnimationFrame)
+ window.cancelAnimationFrame = function(id) {
+ clearTimeout(id);
+ };
+}());

No commit comments for this range

Something went wrong with that request. Please try again.