Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

split up into effects file

  • Loading branch information...
commit 41471e3d60e8f92d1174b35f0349389bc9d5d351 1 parent 7319d19
@maccman authored
View
57 index.html
@@ -8,9 +8,10 @@
<title>GFX</title>
<link rel="stylesheet" href="site/site.css" type="text/css" charset="utf-8">
-
+
<script src="site/jquery.js" type="text/javascript" charset="utf-8"></script>
- <script src="lib/gfx.js" type="text/javascript" charset="utf-8"></script>
+ <script src="lib/gfx.js" type="text/javascript" charset="utf-8"></script>
+ <script src="lib/gfx.effects.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/gfx.overlay.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/gfx.flip.js" type="text/javascript" charset="utf-8"></script>
<script src="lib/gfx.cube.js" type="text/javascript" charset="utf-8"></script>
@@ -20,10 +21,10 @@
$("#container").gfxPopIn({
scale: ".8"
});
-
- if ( !$.browser.webkit )
+
+ if ( !$.browser.webkit )
$("#unsupported").show()
-
+
$("#crazy").click(function() {
return $(this).gfx({
scale: "1.5",
@@ -43,7 +44,7 @@
background: "#E3E3E3"
});
});
-
+
$(".about").click(function() {
return $.gfxOverlay("#aboutText", {
css: {
@@ -52,39 +53,39 @@
}
});
});
-
+
$("#flip").gfxFlip().click(function() {
return $(this).trigger("flip");
});
-
+
$("#shake").click(function() {
return $(this).gfxShake();
});
-
+
$("#explode").click(function() {
return $(this).gfxExplodeOut({
reset: false
}).delay(300).gfxExplodeIn();
});
-
+
$("#cube").gfxCube({
width: 500,
height: 290
});
-
+
$("#main .download").click(function() {
return $("#cube").trigger("cube", "right");
});
-
+
return $("#main .back").click(function() {
return $("#cube").trigger("cube", "front");
});
});
</script>
-
+
<script type="text/plain" id="aboutText">
<h2>About</h2>
- <p>GFX was created by <a href="http://alexmaccaw.co.uk">Alex MacCaw</a>.</p>
+ <p>GFX was created by <a href="http://alexmaccaw.co.uk">Alex MacCaw</a>.</p>
<p><a href="http://twitter.com/maccman">Friend him</a> on Twitter.</p>
</script>
</head>
@@ -92,14 +93,14 @@
<div id="container">
<div id="inner">
<div id="unsupported"><h2>Sorry, your browser isn't fully supported yet. <br /> Things on this site may not work!</h2></div>
-
+
<div id="main">
<div id="cube">
- <div class="box front face">
+ <div class="box front face">
<h1>GFX - a 3D CSS3 animation library for jQuery</h1>
-
+
<p>GFX integrates CSS3 transforms and transitions into <a href="http://jquery.com">jQuery</a>, making it stupidly simple to create sophisticated and gorgeous animations.</p>
-
+
<pre><code>$(this).gfx({scale: "1.5"})
.delay(100)
.gfx({scale: "1"})
@@ -110,34 +111,34 @@
.gfx({translateX: 0, opacity: 1})
.gfxExplodeOut().delay(100).gfxExplodeIn()
.gfxShake();</code></pre>
-
+
<footer><a class="about">About</a> <a class="download">Download &amp; docs &raquo; </a></footer>
</div>
-
+
<div class="box right face">
<h2>Download GFX</h2>
-
+
<p>Download the <a href="https://github.com/maccman/gfx/tarball/gh-pages">latest version (0.0.1)</a>, or checkout the <a href="http://github.com/maccman/gfx">source</a>.</p>
-
+
<h2>Documentation</h2>
-
+
<p>You can find the libraries documentation in the <a href="https://github.com/maccman/gfx/blob/master/README.md">README</a></p>
-
+
<footer><a class="back">&laquo; Back</a></footer>
</div>
</div>
</div>
-
+
<div id="examples">
<div id="flip" class="item">
<div class="box front"><h2>Flip</h2></div>
<div class="box back"><h2>Flipped!</h2></div>
</div>
-
+
<div id="explode" class="box item"><h2>Explode</h2></div>
-
+
<div id="shake" class="box item"><h2>Shake</h2></div>
-
+
<div id="crazy" class="box item"><h2>Crazy</h2></div>
</div>
</div>
View
295 lib/gfx.effects.js
@@ -0,0 +1,295 @@
+
+ $.fn.gfxPopIn = function(options) {
+ var _ref;
+ if (options == null) options = {};
+ if ((_ref = options.scale) == null) options.scale = '.2';
+ $(this).queueNext(function() {
+ return $(this).transform({
+ '-webkit-transform-origin': '50% 50%',
+ '-moz-transform-origin': '50% 50%',
+ scale: options.scale,
+ opacity: '0',
+ display: 'block'
+ });
+ });
+ return $(this).gfx({
+ scale: '1',
+ opacity: '1'
+ }, options);
+ };
+
+ $.fn.gfxPopOut = function(options) {
+ $(this).queueNext(function() {
+ return $(this).transform({
+ '-webkit-transform-origin': '50% 50%',
+ '-moz-transform-origin': '50% 50%',
+ scale: '1',
+ opacity: '1'
+ });
+ });
+ $(this).gfx({
+ scale: '.2',
+ opacity: '0'
+ }, options);
+ return $(this).queueNext(function() {
+ return $(this).transform({
+ display: 'none',
+ opacity: '1',
+ scale: '1'
+ });
+ });
+ };
+
+ $.fn.gfxFadeIn = function(options) {
+ var _ref;
+ if (options == null) options = {};
+ if ((_ref = options.duration) == null) options.duration = 1000;
+ $(this).queueNext(function() {
+ return $(this).css({
+ opacity: '0'
+ }).show();
+ });
+ return $(this).gfx({
+ opacity: 1
+ }, options);
+ };
+
+ $.fn.gfxFadeOut = function(options) {
+ if (options == null) options = {};
+ $(this).queueNext(function() {
+ return $(this).css({
+ opacity: 1
+ });
+ });
+ $(this).gfx({
+ opacity: 0
+ }, options);
+ return $(this).queueNext(function() {
+ return $(this).hide().css({
+ opacity: 1
+ });
+ });
+ };
+
+ $.fn.gfxShake = function(options) {
+ var distance, _ref, _ref2;
+ if (options == null) options = {};
+ if ((_ref = options.duration) == null) options.duration = 100;
+ if ((_ref2 = options.easing) == null) options.easing = 'ease-out';
+ distance = options.distance || 20;
+ $(this).gfx({
+ translateX: "-" + distance + "px"
+ }, options);
+ $(this).gfx({
+ translateX: "" + distance + "px"
+ }, options);
+ $(this).gfx({
+ translateX: "-" + distance + "px"
+ }, options);
+ $(this).gfx({
+ translateX: "" + distance + "px"
+ }, options);
+ return $(this).queueNext(function() {
+ return $(this).transform({
+ translateX: 0
+ });
+ });
+ };
+
+ $.fn.gfxBlip = function(options) {
+ if (options == null) options = {};
+ options.scale || (options.scale = '1.15');
+ $(this).gfx({
+ scale: options.scale
+ }, options);
+ return $(this).gfx({
+ scale: '1'
+ }, options);
+ };
+
+ $.fn.gfxExplodeIn = function(options) {
+ if (options == null) options = {};
+ options.scale || (options.scale = '3');
+ $(this).queueNext(function() {
+ return $(this).transform({
+ scale: options.scale,
+ opacity: '0',
+ display: 'block'
+ });
+ });
+ return $(this).gfx({
+ scale: '1',
+ opacity: '1'
+ }, options);
+ };
+
+ $.fn.gfxExplodeOut = function(options) {
+ if (options == null) options = {};
+ options.scale || (options.scale = '3');
+ $(this).queueNext(function() {
+ return $(this).transform({
+ scale: '1',
+ opacity: '1'
+ });
+ });
+ $(this).gfx({
+ scale: options.scale,
+ opacity: '0'
+ }, options);
+ if (options.reset !== false) {
+ $(this).queueNext(function() {
+ return $(this).transform({
+ scale: '1',
+ opacity: '1',
+ display: 'none'
+ });
+ });
+ }
+ return this;
+ };
+
+ $.fn.gfxFlipIn = function(options) {
+ if (options == null) options = {};
+ $(this).queueNext(function() {
+ return $(this).transform({
+ rotateY: '180deg',
+ scale: '.8',
+ display: 'block'
+ });
+ });
+ return $(this).gfx({
+ rotateY: 0,
+ scale: 1
+ }, options);
+ };
+
+ $.fn.gfxFlipOut = function(options) {
+ if (options == null) options = {};
+ $(this).queueNext(function() {
+ return $(this).transform({
+ rotateY: 0,
+ scale: 1
+ });
+ });
+ $(this).gfx({
+ rotateY: '-180deg',
+ scale: '.8'
+ }, options);
+ if (options.reset !== false) {
+ $(this).queueNext(function() {
+ return $(this).transform({
+ scale: 1,
+ rotateY: 0,
+ display: 'none'
+ });
+ });
+ }
+ return this;
+ };
+
+ $.fn.gfxRotateOut = function(options) {
+ if (options == null) options = {};
+ $(this).queueNext(function() {
+ return $(this).transform({
+ rotateY: 0
+ }).fix();
+ });
+ $(this).gfx({
+ rotateY: '-180deg'
+ }, options);
+ if (options.reset !== false) {
+ $(this).queueNext(function() {
+ return $(this).transform({
+ rotateY: 0,
+ display: 'none'
+ }).unfix();
+ });
+ }
+ return this;
+ };
+
+ $.fn.gfxRotateIn = function(options) {
+ var $;
+ if (options == null) options = {};
+ $(this).queueNext(function() {
+ return $(this).transform({
+ rotateY: '180deg',
+ display: 'block'
+ }).fix();
+ });
+ $(this).gfx({
+ rotateY: 0
+ }, options);
+ $(this).queueNext(function() {
+ return $(this).unfix();
+ });
+ return $ = jQuery;
+ };
+
+ $.fn.gfxSlideOut = function(options) {
+ var distance, opacity;
+ if (options == null) options = {};
+ options.direction || (options.direction = 'right');
+ distance = options.distance || 100;
+ if (options.direction === 'left') distance *= -1;
+ distance += "%";
+ opacity = options.fade ? 0 : 1;
+ $(this).queueNext(function() {
+ return $(this).show();
+ });
+ $(this).gfx({
+ translate3d: "" + distance + ",0,0",
+ opacity: opacity
+ }, options);
+ return $(this).queueNext(function() {
+ return $(this).transform({
+ translate3d: "0,0,0",
+ opacity: 1
+ }).hide();
+ });
+ };
+
+ $.fn.gfxSlideIn = function(options) {
+ var distance, opacity;
+ if (options == null) options = {};
+ options.direction || (options.direction = 'right');
+ distance = options.distance || 100;
+ if (options.direction === 'left') distance *= -1;
+ distance += "%";
+ opacity = options.fade ? 0 : 1;
+ $(this).queueNext(function() {
+ return $(this).transform({
+ translate3d: "" + distance + ",0,0",
+ opacity: opacity
+ }).show();
+ });
+ return $(this).gfx({
+ translate3d: "0,0,0",
+ opacity: 1
+ }, options);
+ };
+
+ $.fn.fix = function() {
+ return $(this).each(function() {
+ var element, parentOffset, styles;
+ element = $(this);
+ styles = element.offset();
+ parentOffset = element.parent().offset();
+ styles.left -= parentOffset.left;
+ styles.top -= parentOffset.top;
+ styles.position = 'absolute';
+ return element.css(styles);
+ });
+ };
+
+ $.fn.unfix = function() {
+ return $(this).each(function() {
+ var element;
+ element = $(this);
+ return element.css({
+ position: '',
+ top: '',
+ left: ''
+ });
+ });
+ };
View
294 lib/gfx.js
@@ -79,298 +79,4 @@
});
};
- $.fn.gfxPopIn = function(options) {
- var _ref;
- if (options == null) options = {};
- if ((_ref = options.scale) == null) options.scale = '.2';
- $(this).queueNext(function() {
- return $(this).transform({
- '-webkit-transform-origin': '50% 50%',
- '-moz-transform-origin': '50% 50%',
- scale: options.scale,
- opacity: '0',
- display: 'block'
- });
- });
- return $(this).gfx({
- scale: '1',
- opacity: '1'
- }, options);
- };
-
- $.fn.gfxPopOut = function(options) {
- $(this).queueNext(function() {
- return $(this).transform({
- '-webkit-transform-origin': '50% 50%',
- '-moz-transform-origin': '50% 50%',
- scale: '1',
- opacity: '1'
- });
- });
- $(this).gfx({
- scale: '.2',
- opacity: '0'
- }, options);
- return $(this).queueNext(function() {
- return $(this).transform({
- display: 'none',
- opacity: '1',
- scale: '1'
- });
- });
- };
-
- $.fn.gfxFadeIn = function(options) {
- var _ref;
- if (options == null) options = {};
- if ((_ref = options.duration) == null) options.duration = 1000;
- $(this).queueNext(function() {
- return $(this).css({
- opacity: '0'
- }).show();
- });
- return $(this).gfx({
- opacity: 1
- }, options);
- };
-
- $.fn.gfxFadeOut = function(options) {
- if (options == null) options = {};
- $(this).queueNext(function() {
- return $(this).css({
- opacity: 1
- });
- });
- $(this).gfx({
- opacity: 0
- }, options);
- return $(this).queueNext(function() {
- return $(this).hide().css({
- opacity: 1
- });
- });
- };
-
- $.fn.gfxShake = function(options) {
- var distance, _ref, _ref2;
- if (options == null) options = {};
- if ((_ref = options.duration) == null) options.duration = 100;
- if ((_ref2 = options.easing) == null) options.easing = 'ease-out';
- distance = options.distance || 20;
- $(this).gfx({
- translateX: "-" + distance + "px"
- }, options);
- $(this).gfx({
- translateX: "" + distance + "px"
- }, options);
- $(this).gfx({
- translateX: "-" + distance + "px"
- }, options);
- $(this).gfx({
- translateX: "" + distance + "px"
- }, options);
- return $(this).queueNext(function() {
- return $(this).transform({
- translateX: 0
- });
- });
- };
-
- $.fn.gfxBlip = function(options) {
- if (options == null) options = {};
- options.scale || (options.scale = '1.15');
- $(this).gfx({
- scale: options.scale
- }, options);
- return $(this).gfx({
- scale: '1'
- }, options);
- };
-
- $.fn.gfxExplodeIn = function(options) {
- if (options == null) options = {};
- options.scale || (options.scale = '3');
- $(this).queueNext(function() {
- return $(this).transform({
- scale: options.scale,
- opacity: '0',
- display: 'block'
- });
- });
- return $(this).gfx({
- scale: '1',
- opacity: '1'
- }, options);
- };
-
- $.fn.gfxExplodeOut = function(options) {
- if (options == null) options = {};
- options.scale || (options.scale = '3');
- $(this).queueNext(function() {
- return $(this).transform({
- scale: '1',
- opacity: '1'
- });
- });
- $(this).gfx({
- scale: options.scale,
- opacity: '0'
- }, options);
- if (options.reset !== false) {
- $(this).queueNext(function() {
- return $(this).transform({
- scale: '1',
- opacity: '1',
- display: 'none'
- });
- });
- }
- return this;
- };
-
- $.fn.gfxFlipIn = function(options) {
- if (options == null) options = {};
- $(this).queueNext(function() {
- return $(this).transform({
- rotateY: '180deg',
- scale: '.8',
- display: 'block'
- });
- });
- return $(this).gfx({
- rotateY: 0,
- scale: 1
- }, options);
- };
-
- $.fn.gfxFlipOut = function(options) {
- if (options == null) options = {};
- $(this).queueNext(function() {
- return $(this).transform({
- rotateY: 0,
- scale: 1
- });
- });
- $(this).gfx({
- rotateY: '-180deg',
- scale: '.8'
- }, options);
- if (options.reset !== false) {
- $(this).queueNext(function() {
- return $(this).transform({
- scale: 1,
- rotateY: 0,
- display: 'none'
- });
- });
- }
- return this;
- };
-
- $.fn.gfxRotateOut = function(options) {
- if (options == null) options = {};
- $(this).queueNext(function() {
- return $(this).transform({
- rotateY: 0
- }).fix();
- });
- $(this).gfx({
- rotateY: '-180deg'
- }, options);
- if (options.reset !== false) {
- $(this).queueNext(function() {
- return $(this).transform({
- rotateY: 0,
- display: 'none'
- }).unfix();
- });
- }
- return this;
- };
-
- $.fn.gfxRotateIn = function(options) {
- if (options == null) options = {};
- $(this).queueNext(function() {
- return $(this).transform({
- rotateY: '180deg',
- display: 'block'
- }).fix();
- });
- $(this).gfx({
- rotateY: 0
- }, options);
- $(this).queueNext(function() {
- return $(this).unfix();
- });
- return $ = jQuery;
- };
-
- $.fn.gfxSlideOut = function(options) {
- var distance, opacity;
- if (options == null) options = {};
- options.direction || (options.direction = 'right');
- distance = options.distance || 100;
- if (options.direction === 'left') distance *= -1;
- distance += "%";
- opacity = options.fade ? 0 : 1;
- $(this).queueNext(function() {
- return $(this).show();
- });
- $(this).gfx({
- translate3d: "" + distance + ",0,0",
- opacity: opacity
- }, options);
- return $(this).queueNext(function() {
- return $(this).transform({
- translate3d: "0,0,0",
- opacity: 1
- }).hide();
- });
- };
-
- $.fn.gfxSlideIn = function(options) {
- var distance, opacity;
- if (options == null) options = {};
- options.direction || (options.direction = 'right');
- distance = options.distance || 100;
- if (options.direction === 'left') distance *= -1;
- distance += "%";
- opacity = options.fade ? 0 : 1;
- $(this).queueNext(function() {
- return $(this).transform({
- translate3d: "" + distance + ",0,0",
- opacity: opacity
- }).show();
- });
- return $(this).gfx({
- translate3d: "0,0,0",
- opacity: 1
- }, options);
- };
-
- $.fn.fix = function() {
- return $(this).each(function() {
- var element, parentOffset, styles;
- element = $(this);
- styles = element.offset();
- parentOffset = element.parent().offset();
- styles.left -= parentOffset.left;
- styles.top -= parentOffset.top;
- styles.position = 'absolute';
- return element.css(styles);
- });
- };
-
- $.fn.unfix = function() {
- return $(this).each(function() {
- var element;
- element = $(this);
- return element.css({
- position: '',
- top: '',
- left: ''
- });
- });
- };
-
}).call(this);
View
177 src/gfx.coffee
@@ -2,8 +2,8 @@ $ = jQuery ? require('jqueryify')
throw 'jQuery required' unless $
-defaults =
- duration: 400
+defaults =
+ duration: 400
queue: true
easing: ''
@@ -15,12 +15,12 @@ vendorNames = n =
transition: "#{prefix}transition"
transform: "#{prefix}transform"
transitionEnd: "#{vendor}TransitionEnd"
-
+
transformTypes = [
'scale', 'scaleX', 'scaleY', 'scale3d',
'rotate', 'rotateX', 'rotateY', 'rotateZ', 'rotate3d',
'translate', 'translateX', 'translateY', 'translateZ', 'translate3d',
- 'skew', 'skewX', 'skewY',
+ 'skew', 'skewX', 'skewY',
'matrix', 'matrix3d', 'perspective'
]
@@ -39,7 +39,7 @@ $.fn.emulateTransitionEnd = (duration) ->
$(@).one(n.transitionEnd, -> called = true)
callback = => $(@).trigger(n.transitionEnd) unless called
setTimeout(callback, duration)
-
+
# Helper function for easily adding transforms
$.fn.transform = (properties) ->
@@ -48,7 +48,7 @@ $.fn.transform = (properties) ->
for key, value of properties when key in transformTypes
transforms.push("#{key}(#{value})")
delete properties[key]
-
+
if transforms.length
properties[n.transform] = transforms.join(' ')
@@ -56,10 +56,10 @@ $.fn.transform = (properties) ->
$.fn.gfx = (properties, options) ->
opts = $.extend({}, defaults, options)
-
+
properties[n.transition] = "all #{opts.duration}ms #{opts.easing}"
-
- callback = ->
+
+ callback = ->
$(@).css(n.transition, '')
opts.complete?.apply(this, arguments)
$(@).dequeue()
@@ -69,161 +69,4 @@ $.fn.gfx = (properties, options) ->
$(@).transform(properties)
# Sometimes the event doesn't fire, so we have to fire it manually
- $(@).emulateTransitionEnd(opts.duration + 50)
-
-# Additional Effects
-
-$.fn.gfxPopIn = (options = {}) ->
- options.scale ?= '.2'
-
- $(@).queueNext ->
- $(@).transform
- '-webkit-transform-origin': '50% 50%'
- '-moz-transform-origin': '50% 50%'
- scale: options.scale
- opacity: '0'
- display: 'block'
-
- $(@).gfx({
- scale: '1'
- opacity: '1'
- }, options)
-
-$.fn.gfxPopOut = (options) ->
- $(@).queueNext ->
- $(@).transform
- '-webkit-transform-origin': '50% 50%'
- '-moz-transform-origin': '50% 50%'
- scale: '1'
- opacity: '1'
- $(@).gfx({
- scale: '.2'
- opacity: '0'
- }, options)
-
- $(@).queueNext ->
- $(@).transform
- display: 'none'
- opacity: '1'
- scale: '1'
-
-$.fn.gfxFadeIn = (options = {}) ->
- options.duration ?= 1000
- $(@).queueNext ->
- $(@).css(opacity: '0').show()
- $(@).gfx({opacity: 1}, options);
-
-$.fn.gfxFadeOut = (options = {}) ->
- $(@).queueNext ->
- $(@).css(opacity: 1)
- $(@).gfx({opacity: 0}, options)
- $(@).queueNext ->
- $(@).hide().css(opacity: 1)
-
-$.fn.gfxShake = (options = {}) ->
- options.duration ?= 100
- options.easing ?= 'ease-out'
- distance = options.distance or 20
- $(@).gfx({translateX: "-#{distance}px"}, options)
- $(@).gfx({translateX: "#{distance}px"}, options)
- $(@).gfx({translateX: "-#{distance}px"}, options)
- $(@).gfx({translateX: "#{distance}px"}, options)
- $(@).queueNext ->
- $(@).transform(translateX: 0)
-
-$.fn.gfxBlip = (options = {}) ->
- options.scale or= '1.15'
- $(@).gfx({scale: options.scale}, options)
- $(@).gfx({scale: '1'}, options)
-
-$.fn.gfxExplodeIn = (options = {}) ->
- options.scale or= '3'
- $(@).queueNext ->
- $(@).transform(scale: options.scale, opacity: '0', display: 'block')
- $(@).gfx({scale: '1', opacity: '1'}, options)
-
-$.fn.gfxExplodeOut = (options = {}) ->
- options.scale or= '3'
- $(@).queueNext ->
- $(@).transform(scale: '1', opacity: '1')
- $(@).gfx({scale: options.scale, opacity: '0'}, options)
-
- unless options.reset is false
- $(@).queueNext ->
- $(@).transform(scale: '1', opacity: '1', display: 'none')
- this
-
-$.fn.gfxFlipIn = (options = {}) ->
- $(@).queueNext ->
- $(@).transform(rotateY: '180deg', scale: '.8', display: 'block')
- $(@).gfx({rotateY: 0, scale: 1}, options)
-
-$.fn.gfxFlipOut = (options = {}) ->
- $(@).queueNext ->
- $(@).transform(rotateY: 0, scale: 1)
- $(@).gfx({rotateY: '-180deg', scale: '.8'}, options)
-
- unless options.reset is false
- $(@).queueNext ->
- $(@).transform(scale: 1, rotateY: 0, display: 'none')
- this
-
-$.fn.gfxRotateOut = (options = {}) ->
- $(@).queueNext ->
- $(@).transform(rotateY: 0).fix()
- $(@).gfx({rotateY: '-180deg'}, options)
-
- unless options.reset is false
- $(@).queueNext ->
- $(@).transform(rotateY: 0, display: 'none').unfix()
- @
-
-$.fn.gfxRotateIn = (options = {}) ->
- $(@).queueNext ->
- $(@).transform(rotateY: '180deg', display: 'block').fix()
- $(@).gfx({rotateY: 0}, options)
- $(@).queueNext -> $(@).unfix()
-
- $ = jQuery
-
-$.fn.gfxSlideOut = (options = {}) ->
- options.direction or= 'right'
-
- distance = options.distance or 100
- distance *= -1 if options.direction is 'left'
- distance += "%"
-
- opacity = if options.fade then 0 else 1
-
- $(@).queueNext -> $(@).show()
- $(@).gfx({translate3d: "#{distance},0,0", opacity: opacity}, options)
- $(@).queueNext ->
- $(@).transform(translate3d: "0,0,0", opacity: 1).hide()
-
-$.fn.gfxSlideIn = (options = {}) ->
- options.direction or= 'right'
-
- distance = options.distance or 100
- distance *= -1 if options.direction is 'left'
- distance += "%"
-
- opacity = if options.fade then 0 else 1
-
- $(@).queueNext ->
- $(@).transform(translate3d: "#{distance},0,0", opacity: opacity).show()
- $(@).gfx({translate3d: "0,0,0", opacity: 1}, options)
-
-$.fn.fix = ->
- $(@).each ->
- element = $(@)
- styles = element.offset()
- parentOffset = element.parent().offset()
- styles.left -= parentOffset.left
- styles.top -= parentOffset.top
- styles.position = 'absolute'
- element.css(styles)
-
-$.fn.unfix = ->
- $(@).each ->
- element = $(@)
- element.css(position: '', top:'', left: '')
+ $(@).emulateTransitionEnd(opts.duration + 50)
View
156 src/gfx.effects.coffee
@@ -0,0 +1,156 @@
+# Additional Effects
+
+$.fn.gfxPopIn = (options = {}) ->
+ options.scale ?= '.2'
+
+ $(@).queueNext ->
+ $(@).transform
+ '-webkit-transform-origin': '50% 50%'
+ '-moz-transform-origin': '50% 50%'
+ scale: options.scale
+ opacity: '0'
+ display: 'block'
+
+ $(@).gfx({
+ scale: '1'
+ opacity: '1'
+ }, options)
+
+$.fn.gfxPopOut = (options) ->
+ $(@).queueNext ->
+ $(@).transform
+ '-webkit-transform-origin': '50% 50%'
+ '-moz-transform-origin': '50% 50%'
+ scale: '1'
+ opacity: '1'
+ $(@).gfx({
+ scale: '.2'
+ opacity: '0'
+ }, options)
+
+ $(@).queueNext ->
+ $(@).transform
+ display: 'none'
+ opacity: '1'
+ scale: '1'
+
+$.fn.gfxFadeIn = (options = {}) ->
+ options.duration ?= 1000
+ $(@).queueNext ->
+ $(@).css(opacity: '0').show()
+ $(@).gfx({opacity: 1}, options);
+
+$.fn.gfxFadeOut = (options = {}) ->
+ $(@).queueNext ->
+ $(@).css(opacity: 1)
+ $(@).gfx({opacity: 0}, options)
+ $(@).queueNext ->
+ $(@).hide().css(opacity: 1)
+
+$.fn.gfxShake = (options = {}) ->
+ options.duration ?= 100
+ options.easing ?= 'ease-out'
+ distance = options.distance or 20
+ $(@).gfx({translateX: "-#{distance}px"}, options)
+ $(@).gfx({translateX: "#{distance}px"}, options)
+ $(@).gfx({translateX: "-#{distance}px"}, options)
+ $(@).gfx({translateX: "#{distance}px"}, options)
+ $(@).queueNext ->
+ $(@).transform(translateX: 0)
+
+$.fn.gfxBlip = (options = {}) ->
+ options.scale or= '1.15'
+ $(@).gfx({scale: options.scale}, options)
+ $(@).gfx({scale: '1'}, options)
+
+$.fn.gfxExplodeIn = (options = {}) ->
+ options.scale or= '3'
+ $(@).queueNext ->
+ $(@).transform(scale: options.scale, opacity: '0', display: 'block')
+ $(@).gfx({scale: '1', opacity: '1'}, options)
+
+$.fn.gfxExplodeOut = (options = {}) ->
+ options.scale or= '3'
+ $(@).queueNext ->
+ $(@).transform(scale: '1', opacity: '1')
+ $(@).gfx({scale: options.scale, opacity: '0'}, options)
+
+ unless options.reset is false
+ $(@).queueNext ->
+ $(@).transform(scale: '1', opacity: '1', display: 'none')
+ this
+
+$.fn.gfxFlipIn = (options = {}) ->
+ $(@).queueNext ->
+ $(@).transform(rotateY: '180deg', scale: '.8', display: 'block')
+ $(@).gfx({rotateY: 0, scale: 1}, options)
+
+$.fn.gfxFlipOut = (options = {}) ->
+ $(@).queueNext ->
+ $(@).transform(rotateY: 0, scale: 1)
+ $(@).gfx({rotateY: '-180deg', scale: '.8'}, options)
+
+ unless options.reset is false
+ $(@).queueNext ->
+ $(@).transform(scale: 1, rotateY: 0, display: 'none')
+ this
+
+$.fn.gfxRotateOut = (options = {}) ->
+ $(@).queueNext ->
+ $(@).transform(rotateY: 0).fix()
+ $(@).gfx({rotateY: '-180deg'}, options)
+
+ unless options.reset is false
+ $(@).queueNext ->
+ $(@).transform(rotateY: 0, display: 'none').unfix()
+ @
+
+$.fn.gfxRotateIn = (options = {}) ->
+ $(@).queueNext ->
+ $(@).transform(rotateY: '180deg', display: 'block').fix()
+ $(@).gfx({rotateY: 0}, options)
+ $(@).queueNext -> $(@).unfix()
+
+ $ = jQuery
+
+$.fn.gfxSlideOut = (options = {}) ->
+ options.direction or= 'right'
+
+ distance = options.distance or 100
+ distance *= -1 if options.direction is 'left'
+ distance += "%"
+
+ opacity = if options.fade then 0 else 1
+
+ $(@).queueNext -> $(@).show()
+ $(@).gfx({translate3d: "#{distance},0,0", opacity: opacity}, options)
+ $(@).queueNext ->
+ $(@).transform(translate3d: "0,0,0", opacity: 1).hide()
+
+$.fn.gfxSlideIn = (options = {}) ->
+ options.direction or= 'right'
+
+ distance = options.distance or 100
+ distance *= -1 if options.direction is 'left'
+ distance += "%"
+
+ opacity = if options.fade then 0 else 1
+
+ $(@).queueNext ->
+ $(@).transform(translate3d: "#{distance},0,0", opacity: opacity).show()
+ $(@).gfx({translate3d: "0,0,0", opacity: 1}, options)
+
+$.fn.fix = ->
+ $(@).each ->
+ element = $(@)
+ styles = element.offset()
+ parentOffset = element.parent().offset()
+ styles.left -= parentOffset.left
+ styles.top -= parentOffset.top
+ styles.position = 'absolute'
+ element.css(styles)
+
+$.fn.unfix = ->
+ $(@).each ->
+ element = $(@)
+ element.css(position: '', top:'', left: '')
Please sign in to comment.
Something went wrong with that request. Please try again.