Browse files

add raised in

  • Loading branch information...
1 parent 00548ae commit ef351709ae3de50b964750d47e0aad264c2fddfa @maccman committed Mar 17, 2012
Showing with 77 additions and 26 deletions.
  1. +1 −1 Cakefile
  2. +46 −12 lib/gfx.effects.js
  3. +1 −0 lib/gfx.js
  4. +7 −4 src/gfx.coffee
  5. +13 −0 src/gfx.effects.coffee
  6. +9 −9 src/gfx.flip.coffee
View
2 Cakefile
@@ -1,4 +1,4 @@
-{print} = require 'sys'
+{print} = require 'util'
{spawn} = require 'child_process'
build = (callback) ->
View
58 lib/gfx.effects.js
@@ -7,10 +7,8 @@
return $(this).transform({
'-webkit-transform-origin': '50% 50%',
'-moz-transform-origin': '50% 50%',
- scale: options.scale,
- opacity: '0',
- display: 'block'
- });
+ scale: options.scale
+ }).show();
});
return $(this).gfx({
scale: '1',
@@ -32,8 +30,7 @@
opacity: '0'
}, options);
return $(this).queueNext(function() {
- return $(this).transform({
- display: 'none',
+ return $(this).hide().transform({
opacity: '1',
scale: '1'
});
@@ -112,9 +109,8 @@
$(this).queueNext(function() {
return $(this).transform({
scale: options.scale,
- opacity: '0',
- display: 'block'
- });
+ opacity: '0'
+ }).show();
});
return $(this).gfx({
scale: '1',
@@ -137,10 +133,9 @@
}, options);
if (options.reset !== false) {
$(this).queueNext(function() {
- return $(this).transform({
+ return $(this).hide().transform({
scale: '1',
- opacity: '1',
- display: 'none'
+ opacity: '1'
});
});
}
@@ -268,6 +263,45 @@
}, options);
};
+ $.fn.gfxRaisedIn = function(options) {
+ if (options == null) options = {};
+ $(this).queueNext(function() {
+ return $(this).transform({
+ scale: '1',
+ opacity: '0',
+ translate3d: '0,-15px,0'
+ }).show();
+ });
+ return $(this).gfx({
+ scale: '1',
+ opacity: '1',
+ translate3d: '0,0,0'
+ }, options);
+ };
+
+ $.fn.gfxRaisedOut = function(options) {
+ if (options == null) options = {};
+ $(this).queueNext(function() {
+ return $(this).transform({
+ scale: '1',
+ opacity: '1',
+ translate3d: '0,0,0'
+ });
+ });
+ $(this).gfx({
+ scale: '1',
+ opacity: '0',
+ translate3d: '0,-8px,0'
+ }, options);
+ return $(this).queueNext(function() {
+ return $(this).hide().transform({
+ scale: '1',
+ opacity: '1',
+ translate3d: '0,0,0'
+ });
+ });
+ };
+
$.fn.fix = function() {
return $(this).each(function() {
var element, parentOffset, styles;
View
1 lib/gfx.js
@@ -68,6 +68,7 @@
delete properties[key];
}
if (transforms.length) properties[n.transform] = transforms.join(' ');
+ if (opts.origin) properties["" + prefix + "transform-origin"] = opts.origin;
return $(this).css(properties);
};
View
11 src/gfx.coffee
@@ -4,8 +4,8 @@ throw 'jQuery required' unless $
$.support.transition or= do ->
style = (new Image).style
- 'transition' of style or
- 'webkitTransition' of style or
+ 'transition' of style or
+ 'webkitTransition' of style or
'MozTransition' of style
vendor = if $.browser.mozilla then 'moz'
@@ -16,7 +16,7 @@ vendorNames = n =
transition: "#{prefix}transition"
transform: "#{prefix}transform"
transitionEnd: "#{vendor}TransitionEnd"
-
+
defaults =
duration: 400
queue: true
@@ -52,7 +52,7 @@ $.fn.emulateTransitionEnd = (duration) ->
$.fn.transform = (properties, options) ->
opts = $.extend({}, defaults, options)
return this unless opts.enabled
-
+
transforms = []
for key, value of properties when key in transformTypes
@@ -62,6 +62,9 @@ $.fn.transform = (properties, options) ->
if transforms.length
properties[n.transform] = transforms.join(' ')
+ if opts.origin
+ properties["#{prefix}transform-origin"] = opts.origin
+
$(@).css(properties)
$.fn.gfx = (properties, options) ->
View
13 src/gfx.effects.coffee
@@ -140,6 +140,19 @@ $.fn.gfxSlideIn = (options = {}) ->
$(@).transform(translate3d: "#{distance},0,0", opacity: opacity).show()
$(@).gfx({translate3d: "0,0,0", opacity: 1}, options)
+$.fn.gfxRaisedIn = (options = {}) ->
+ $(@).queueNext ->
+ $(@).transform(scale: '1', opacity: '0', translate3d: '0,-15px,0').show()
+ $(@).gfx({scale: '1', opacity: '1', translate3d: '0,0,0'}, options)
+
+$.fn.gfxRaisedOut = (options = {}) ->
+ $(@).queueNext ->
+ $(@).transform(scale: '1', opacity: '1', translate3d: '0,0,0')
+ $(@).gfx({scale: '1', opacity: '0', translate3d: '0,-8px,0'}, options)
+
+ $(@).queueNext ->
+ $(@).hide().transform(scale: '1', opacity: '1', translate3d: '0,0,0')
+
$.fn.fix = ->
$(@).each ->
element = $(@)
View
18 src/gfx.flip.coffee
@@ -1,15 +1,15 @@
$ = jQuery
-defaults =
+defaults =
width: 120
height: 120
$.fn.gfxFlip = (options = {}) ->
opts = $.extend({}, defaults, options)
-
+
front = $(@).find('.front')
back = $(@).find('.back')
-
+
$(@).css(
'position': 'relative'
'-webkit-perspective': '600'
@@ -18,24 +18,24 @@ $.fn.gfxFlip = (options = {}) ->
'-moz-transform-style': 'preserve-3d'
'-webkit-transform-origin': '50% 50%'
'-moz-transform-origin': '50% 50%'
- 'width': opts.width;
- 'height': opts.height;
+ 'width': opts.width
+ 'height': opts.height
)
-
+
front.add(back).css
position: 'absolute'
width: '100%'
height: '100%'
display: 'block'
'-webkit-backface-visibility': 'hidden'
'-moz-backface-visibility': 'hidden'
-
+
back.transform
rotateY: '-180deg'
-
+
$(@).bind 'flip', ->
$(@).toggleClass('flipped')
flipped = $(@).hasClass('flipped')
-
+
front.gfx('rotateY': if flipped then '180deg' else '0deg')
back.gfx('rotateY': if flipped then '0deg' else '-180deg')

0 comments on commit ef35170

Please sign in to comment.