Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

more cleanup

  • Loading branch information...
commit fb163dba65f23a089f281a13b52292756f1e3d8c 1 parent 4c6b22f
@twobit authored
Showing with 17 additions and 16 deletions.
  1. +1 −3 index.css
  2. +16 −13 js/parallaxer.js
View
4 index.css
@@ -1,5 +1,3 @@
-
-
html {background: #1C2C45;}
@-webkit-keyframes float {
@@ -13,7 +11,7 @@ html {background: #1C2C45;}
#stage {-webkit-transform: translate3d(0, 0, 0); position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-transform-style: preserve-3d;}
#stage .layer {position: absolute; top: 0; left: 50%; background-repeat: repeat; background-position: top left; -webkit-transform-style: preserve-3d;}
#stage div.layer {margin-left: -879px; width: 1758px; height: 800px;}
-#stage a.layer {display: block; top: 100px; margin-left: 250px; width: 193px; height: 162px;}
+#stage a.layer {display: block; top: 200px; margin-left: 250px; width: 193px; height: 162px;}
#stage #stars {background-image: url(img/stars.png); -webkit-transform: scale(4) translate3d(0, 0, -300px);}
#stage #gas {background-image: url(img/gas.png); -webkit-transform: scale(3) translate3d(0, 0, -200px);}
#stage #planets {background-image: url(img/planets.png); -webkit-transform: scale(2) translate3d(0, 0, -100px);}
View
29 js/parallaxer.js
@@ -1,17 +1,21 @@
(function(window) {
- function Parallaxer(stage) {
+ function Parallaxer(stage, xRange, yRange) {
this._stage = stage;
+ this._range = {
+ x: xRange || Parallaxer.X_RANGE,
+ y: yRange || Parallaxer.Y_RANGE
+ };
this._transitioning = false;
this._lastCursor = null;
- this._xRange = 0.1; // Move at most 1/10 window width in x direction
- this._yRange = 0.2; // Move at most 1/5 window height in y direction
window.addEventListener('devicemotion', this._onDeviceMove.bind(this), true);
window.addEventListener('mousemove', this._onMouseMove.bind(this), true);
}
+ Parallaxer.X_RANGE = 0.1; // Move at most 1/10 window width in x direction
+ Parallaxer.Y_RANGE = 0.2; // Move at most 1/5 window height in y direction
Parallaxer.TRANSITION = 'all .01s linear';
- Parallaxer.TRANSITION_DIST_SQ = 200 * 200; // Minimum distance before applying a smooth transition effect
+ Parallaxer.TRANSITION_DIST_SQ = 200 * 200; // Minimum distance before applying a transition effect
Parallaxer.prototype = {
_onDeviceMove: function(e) {
@@ -30,25 +34,24 @@
},
_onMouseMove: function(e) {
- var cursor = {x: e.clientX, y: e.clientY};
-
if (!this._lastCursor) { // Transition to initial mouse coordinates
this._transition();
}
- else if (!this._transitioning) { // Transition if distance between mouse events is large
- var dx = cursor.x - this._lastCursor.x,
- dy = cursor.y - this._lastCursor.y;
-
+ else if (!this._transitioning) {
+ var dx = e.clientX - this._lastCursor.x,
+ dy = e.clientY - this._lastCursor.y;
+
+ // Transition if distance between mouse events is large
if (dx * dx + dy * dy > Parallaxer.TRANSITION_DIST_SQ) {
this._transition();
}
}
- var x = -(cursor.x / window.innerWidth - 0.5) * window.innerWidth * this._xRange,
- y = -(cursor.y / window.innerHeight - 0.5) * window.innerHeight * this._yRange;
+ var x = -(e.clientX / window.innerWidth - 0.5) * window.innerWidth * this._range.x,
+ y = -(e.clientY / window.innerHeight - 0.5) * window.innerHeight * this._range.y;
this._stage.style.WebkitTransform = 'translate(' + x + 'px,' + y + 'px)';
- this._lastCursor = cursor;
+ this._lastCursor = {x: e.clientX, y: e.clientY};
}
};
Please sign in to comment.
Something went wrong with that request. Please try again.