Permalink
Browse files

firefox now working

  • Loading branch information...
1 parent 20f041b commit 8291accb00cbe71dcf8af6d97b10a67e80a6556e @twobit committed May 24, 2012
Showing with 15 additions and 6 deletions.
  1. +1 −1 examples/demo/index.css
  2. +14 −5 parallaxer.js
@@ -1,7 +1,7 @@
/* Required Parallaxer Styles */
.viewport {position: relative; overflow: hidden;}
.stage {position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d;}
-.stage .layer {position: absolute; top: 0; left: 50%; background-repeat: no-repeat; background-position: top left; transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d;}
+.stage .layer {position: absolute; top: 0; left: 50%; background-repeat: no-repeat; background-position: top left; transform-style: preserve-3d; -webkit-transform-style: preserve-3d;}
/* Demo Styles */
#viewport {position: absolute; top: 0; left: 0; right: 0; bottom: 0; perspective: 100px; -webkit-perspective: 100px; -moz-perspective: 100px;}
View
@@ -13,17 +13,16 @@
var self = this;
+ /*
+ TODO: Improve device motion support
if (window.DeviceMotionEvent) {
- /*
- TODO: Improve device motion support
this._ax = this._ay = 0.0;
setInterval(this._onDeviceMotionRender.bind(this));
window.addEventListener('devicemotion', function(e) {self._onDeviceMotion(e);}, true);
- */
}
else {
- window.addEventListener('mousemove', function(e) {self._onMouseMove(e);}, true);
- }
+ }*/
+ window.addEventListener('mousemove', function(e) {self._onMouseMove(e);}, true);
}
Parallaxer.X_RANGE = 50; // Max distance in x direction
@@ -54,18 +53,26 @@
var x = this._inversion * this._ax * this._range.x,
y = this._inversion * this._ay * this._range.y;
+ this._stage.style.transform = 'translate3d(' + x + 'px,' + y + 'px, 0)';
this._stage.style.WebkitTransform = 'translate3d(' + x + 'px,' + y + 'px, 0)';
+ this._stage.style.MozTransform = 'translate3d(' + x + 'px,' + y + 'px, 0)';
},
_transition: function() {
this._transitioning = true;
+ this._stage.style.transition = Parallaxer.TRANSITION;
this._stage.style.WebkitTransition = Parallaxer.TRANSITION;
+ this._stage.style.MozTransition = Parallaxer.TRANSITION;
var self = this;
+ window.addEventListener('transitionEnd', function(e) {self._onEndTransition(e);}, true);
window.addEventListener('webkitTransitionEnd', function(e) {self._onEndTransition(e);}, true);
+ window.addEventListener('mozTransitionEnd', function(e) {self._onEndTransition(e);}, true);
},
_onEndTransition: function() {
+ this._stage.style.transition = '';
this._stage.style.WebkitTransition = '';
+ this._stage.style.MozTransition = '';
this._transitioning = false;
},
@@ -86,7 +93,9 @@
var x = this._inversion * (2 * e.clientX / window.innerWidth - 1.0) * this._range.x,
y = this._inversion * (2 * e.clientY / window.innerHeight - 1.0) * this._range.y;
+ this._stage.style.transform = 'translate3d(' + x + 'px,' + y + 'px, 0)';
this._stage.style.WebkitTransform = 'translate3d(' + x + 'px,' + y + 'px, 0)';
+ this._stage.style.MozTransform = 'translate3d(' + x + 'px,' + y + 'px, 0)';
this._lastCursor = {x: e.clientX, y: e.clientY};
}
};

0 comments on commit 8291acc

Please sign in to comment.