Added support for custom css animations.

Author: oblador

angular-parallax.js

@@ -37,25 +37,32 @@ directive('duParallax',
     }
 
     var translate3d = function(result){
-      return 'translate3d(' + result.x + 'px, ' + result.y + 'px, 0)';
+      if(!result.x && !result.y) return '';
+      return 'translate3d(' + Math.round(result.x) + 'px, ' + Math.round(result.y) + 'px, 0)';
     };
 
     var rotate = function(result) {
       if(!result.rotation) return '';
-      return ' rotate(' + result.rotation + (angular.isNumber(result.rotation) ? 'deg' : '') +  ')';
+      return ' rotate(' + (angular.isNumber(result.rotation) ? Math.round(result.rotation) + 'deg' : result.rotation) +  ')';
     };
 
     var applyProperties = function(result, element) {
       element.style[transformProperty] = translate3d(result) + rotate(result);
       element.style.opacity = result.opacity;
+      if(result.custom) {
+        for(var property in result.custom) {
+          element.style[property] = result.custom[property];
+        }
+      }
     };
 
     return{
       scope : {
         y : '=',
         x : '=',
         rotation : '=',
-        opacity : '='
+        opacity : '=', 
+        custom : '='
       },
       link: function($scope, $element, $attr){
         var element = $element[0];
@@ -68,7 +75,7 @@ directive('duParallax',
             elemY: rect.top
           };
 
-          var properties = { x : 0, y : 0, rotation : 0, opacity: 1};
+          var properties = { x : 0, y : 0, rotation : 0, opacity: 1, custom: undefined};
 
           for(var key in properties){
             if(angular.isFunction($scope[key])){

angular-parallax.min.js

@@ -17,6 +17,7 @@ directive('duParallax',
     }
 
     var translate3d = function(result){
+      if(!result.x && !result.y) return '';
       return 'translate3d(' + Math.round(result.x) + 'px, ' + Math.round(result.y) + 'px, 0)';
     };
 
@@ -28,14 +29,20 @@ directive('duParallax',
     var applyProperties = function(result, element) {
       element.style[transformProperty] = translate3d(result) + rotate(result);
       element.style.opacity = result.opacity;
+      if(result.custom) {
+        for(var property in result.custom) {
+          element.style[property] = result.custom[property];
+        }
+      }
     };
 
     return{
       scope : {
         y : '=',
         x : '=',
         rotation : '=',
-        opacity : '='
+        opacity : '=', 
+        custom : '='
       },
       link: function($scope, $element, $attr){
         var element = $element[0];
@@ -48,7 +55,7 @@ directive('duParallax',
             elemY: rect.top
           };
 
-          var properties = { x : 0, y : 0, rotation : 0, opacity: 1};
+          var properties = { x : 0, y : 0, rotation : 0, opacity: 1, custom: undefined};
 
           for(var key in properties){
             if(angular.isFunction($scope[key])){