From eabc23701047c2164f5446f245a8886f48801312 Mon Sep 17 00:00:00 2001 From: krazyjakee Date: Mon, 29 Jul 2013 06:02:10 -0700 Subject: [PATCH 01/19] Create gh-pages branch via GitHub --- index.html | 103 ++++++++++++++ javascripts/scale.fix.js | 17 +++ params.json | 1 + stylesheets/pygment_trac.css | 69 ++++++++++ stylesheets/styles.css | 255 +++++++++++++++++++++++++++++++++++ 5 files changed, 445 insertions(+) create mode 100644 index.html create mode 100644 javascripts/scale.fix.js create mode 100644 params.json create mode 100644 stylesheets/pygment_trac.css create mode 100644 stylesheets/styles.css diff --git a/index.html b/index.html new file mode 100644 index 0000000..7c727c2 --- /dev/null +++ b/index.html @@ -0,0 +1,103 @@ + + + + + + Jquery-keyframes by krazyjakee + + + + + + + +
+
+

Jquery-keyframes

+

jQuery-Keyframes generates and runs CSS3 keyframes quickly and easily allowing you to concentrate on the content of your project whilst cutting down code.

+ +

View the Project on GitHub krazyjakee/jQuery-Keyframes

+ + + +
+
+

+keyframes.js

+ +

Want a pure javascript version with more features? Check out https://github.com/krazyjakee/keyframes.js

+ +

+jQuery-Keyframes

+ +

See it in action: http://jsfiddle.net/GcJP8/3/

+ +

jQuery-Keyframes generates and plays CSS3 keyframes quickly and easily allowing you to concentrate on the content of your project whilst cutting down code.

+ +

+Example Usage

+ +
+// Get browser style prefix
+$.keyframe.browserCode();
+
+// Adding a new animation sequence (keyframe)
+$.fn.addKeyframe([{
+    name: "trapdoor-sequence",
+    "0%": "height:70px",
+    "30%": "height:10px",
+    "60%": "height:30px",
+    "100%": "height:10px"
+}]);
+
+// Adding browser specific frame styles
+$.fn.addKeyframe([{
+    name: "ball-roll",
+    "from": $.keyframe.browserCode()+"transform:rotate(0deg)",
+    "to": $.keyframe.browserCode()+"transform:rotate(360deg)",
+}]);
+
+// Playing an animation
+$(selector).playKeyframe({
+        name: 'trapdoor-sequence', // name of the keyframe you want to bind to the selected element, mandatory parameter
+        duration: 1000, // how long you want it to last in milliseconds, mandatory parameter
+        timingFunction: 'linear', // specifies the speed curve of the animation, mandatory parameter
+        delay: 0, // how long you want to wait before the animation starts in milliseconds, default value is 0
+        repeat: 'infinite', // how many times you want the animation to repeat, default value is 1
+        direction: 'normal', // which direction you want the frames to flow, default value is normal
+        fillMode: 'forwards' // how to apply the styles outside the animation time, default value is forwards
+    },
+    callback // Function fired after the animation is complete. If repeat is infinite, the function will be fired every time the animation is restarted.
+);
+
+// Playing the same animation but using the shorthand method
+$(selector).playKeyframe('trapdoor-sequence 1000 linear 0 infinite normal forwards',callback);
+
+// Reset the animation
+$(selector).resetKeyframe(callback);
+
+// Freeze keyframe animation and kill callbacks
+$(selector).pauseKeyframe();
+
+// Resume keyframe animation
+$(selector).resumeKeyframe();
+
+// Get the current running keyframe animation name applied to an element. If false, no animation is running.
+var framename = $(selector).data('keyframe');
+
+
+ +
+ + + + \ No newline at end of file diff --git a/javascripts/scale.fix.js b/javascripts/scale.fix.js new file mode 100644 index 0000000..87a40ca --- /dev/null +++ b/javascripts/scale.fix.js @@ -0,0 +1,17 @@ +var metas = document.getElementsByTagName('meta'); +var i; +if (navigator.userAgent.match(/iPhone/i)) { + for (i=0; i Date: Thu, 5 Sep 2013 01:45:49 -0700 Subject: [PATCH 02/19] Create gh-pages branch via GitHub --- index.html | 80 ++++++++++++++++++++++++++++++----------------------- params.json | 2 +- 2 files changed, 47 insertions(+), 35 deletions(-) diff --git a/index.html b/index.html index 7c727c2..ffd77ef 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - Jquery-keyframes by krazyjakee + Jquery.keyframes by krazyjakee @@ -15,38 +15,41 @@
-

Jquery-keyframes

-

jQuery-Keyframes generates and runs CSS3 keyframes quickly and easily allowing you to concentrate on the content of your project whilst cutting down code.

+

Jquery.keyframes

+

jQuery.Keyframes generates and runs CSS3 keyframes quickly and easily allowing you to concentrate on the content of your project whilst cutting down code.

-

View the Project on GitHub krazyjakee/jQuery-Keyframes

+

View the Project on GitHub krazyjakee/jQuery.Keyframes

-keyframes.js

+jQuery.Keyframes -

Want a pure javascript version with more features? Check out https://github.com/krazyjakee/keyframes.js

+

jQuery.Keyframes generates and plays CSS3 keyframes quickly and easily allowing you to concentrate on the content of your project whilst cutting down code.

-

-jQuery-Keyframes

+

jQuery.Keyframes introduces

-

See it in action: http://jsfiddle.net/GcJP8/3/

- -

jQuery-Keyframes generates and plays CSS3 keyframes quickly and easily allowing you to concentrate on the content of your project whilst cutting down code.

- -

+
    +
  • some changes in the API
    • +
  • $.keyframe.isSupported() to detect CSS animation support
    • +
  • 10% smaller minified version (2.256 kb vs 2.453 kb)
    • +
  • support for keyframe redefinition: if you redifine an existing keyframe, running animation will reflect those changes
    • +

Example Usage

 // Get browser style prefix
 $.keyframe.browserCode();
 
+// Detecting CSS animation support
+$.keyframe.isSupported();
+
 // Adding a new animation sequence (keyframe)
 $.fn.addKeyframe([{
     name: "trapdoor-sequence",
@@ -56,29 +59,40 @@ 

     "100%": "height:10px"
 }]);
 
-// Adding browser specific frame styles
-$.fn.addKeyframe([{
+// Adding a single frame style
+$.keyframe.define({
     name: "ball-roll",
-    "from": $.keyframe.browserCode()+"transform:rotate(0deg)",
-    "to": $.keyframe.browserCode()+"transform:rotate(360deg)",
-}]);
+    from: $.keyframe.browserCode()+"transform:rotate(0deg)",
+    to: $.keyframe.browserCode()+"transform:rotate(360deg)",
+});
+
+// Adding multiple frame styles
+$.keyframe.define([{
+    name: "ball-roll",
+    from: $.keyframe.browserCode()+"transform:rotate(0deg)",
+    to: $.keyframe.browserCode()+"transform:rotate(360deg)",
+    },
+    {
+    name: "half-rotation",
+    from: $.keyframe.browserCode()+"transform:rotate(0deg)",
+    to: $.keyframe.browserCode()+"transform:rotate(180deg)",
+    }
+]);
+
 
 // Playing an animation
 $(selector).playKeyframe({
-        name: 'trapdoor-sequence', // name of the keyframe you want to bind to the selected element, mandatory parameter
-        duration: 1000, // how long you want it to last in milliseconds, mandatory parameter
-        timingFunction: 'linear', // specifies the speed curve of the animation, mandatory parameter
-        delay: 0, // how long you want to wait before the animation starts in milliseconds, default value is 0
-        repeat: 'infinite', // how many times you want the animation to repeat, default value is 1
-        direction: 'normal', // which direction you want the frames to flow, default value is normal
-        fillMode: 'forwards' // how to apply the styles outside the animation time, default value is forwards
+        name: 'trapdoor-sequence', // name of the keyframe you want to bind to the selected element
+        duration: 1000, // [optional, default: 0, in ms] how long you want it to last in milliseconds
+        timingFunction: 'linear', // [optional, default: ease] specifies the speed curve of the animation
+        delay: 0, //[optional, default: 0, in ms]  how long you want to wait before the animation starts in milliseconds, default value is 0
+        repeat: 'infinite', //[optional, default:1]  how many times you want the animation to repeat, default value is 1
+        direction: 'normal', //[optional, default: 'normal']  which direction you want the frames to flow, default value is normal
+        fillMode: 'forwards' //[optional, default: 'forward']  how to apply the styles outside the animation time, default value is forwards
+        complete: function(){} //[optional]  Function fired after the animation is complete. If repeat is infinite, the function will be fired every time the animation is restarted.
     },
-    callback // Function fired after the animation is complete. If repeat is infinite, the function will be fired every time the animation is restarted.
 );
 
-// Playing the same animation but using the shorthand method
-$(selector).playKeyframe('trapdoor-sequence 1000 linear 0 infinite normal forwards',callback);
-
 // Reset the animation
 $(selector).resetKeyframe(callback);
 
@@ -88,8 +102,6 @@ 

 // Resume keyframe animation
 $(selector).resumeKeyframe();
 
-// Get the current running keyframe animation name applied to an element. If false, no animation is running.
-var framename = $(selector).data('keyframe');