Skip to content
Browse files

Initial import

  • Loading branch information...
0 parents commit f2b28145f37fcaf04d7470bf5a34b16146a7f98a @twobit committed
Showing with 128 additions and 0 deletions.
  1. BIN img/gas.png
  2. BIN img/hypernaut.png
  3. BIN img/planets.png
  4. BIN img/stars.png
  5. +23 −0 index.css
  6. +26 −0 index.html
  7. +58 −0 js/parallaxer.js
  8. +21 −0 test.html
BIN img/gas.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN img/hypernaut.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN img/planets.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN img/stars.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 index.css
@@ -0,0 +1,23 @@
+
+
+html {background: #1C2C45;}
+
+@-webkit-keyframes float {
+ 0% {margin-top: 0; margin-left: 250px;}
+ 25% {margin-left: 255px;}
+ 50% {margin-left: 250px;}
+ 100% {margin-top: 20px; margin-left: 255px;}
+}
+
+#viewport {/*z-index: -1;*/ position: absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; -webkit-perspective: 100;}
+#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 #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);}
+#stage #hypernaut {background-image: url(img/hypernaut.png); -webkit-transform: translate3d(0, 0, 0); -webkit-animation: float 3s linear infinite alternate; z-index: -3;}
+
+/*#viewport:hover #hypernaut {-webkit-transform: translate3d(0, 0, 10px);}*/
+#content {max-width: 470px; min-height: 400px; margin: 100px auto; background: #D9D9B8; border-radius: 10px; z-index: 1;}
26 index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Parallaxer</title>
+ <link rel="stylesheet" type="text/css" href="index.css" />
+ </head>
+ <body>
+ <div id="viewport">
+ <div id="stage">
+ <div id="stars" class="layer"></div>
+ <div id="gas" class="layer"></div>
+ <div id="planets" class="layer"></div>
+ <a id="hypernaut" href="#" class="layer"></a>
+ </div>
+ </div>
+
+ <div id="content"></div>
+
+ <script type="text/javascript" src="js/parallaxer.js"></script>
+ <script type="text/javascript">
+ $(document).ready(function() {
+ new Parallaxer($('#stage').get(0));
+ });
+ </script>
+ </body>
+</html>
58 js/parallaxer.js
@@ -0,0 +1,58 @@
+(function(window) {
+ function Parallaxer(stage) {
+ this._stage = stage;
+ this._transitioning = false;
+ this._lastCursor = null;
+
+ window.addEventListener('devicemotion', this._onDeviceMove.bind(this), true);
+ window.addEventListener('mousemove', this._onMouseMove.bind(this), true);
+ }
+
+ Parallaxer.TRANSITION = 'all .08s linear';
+ Parallaxer.TRANSITION_DIST_SQ = 200 * 200; // Minimum distance before applying a smooth transition effect
+
+ Parallaxer.prototype = {
+ _onDeviceMove: function(e) {
+ console.log('deviceMove');
+ },
+
+ _transition: function() {
+ console.log('TRANSITION');
+ this._transitioning = true;
+ this._stage.style.WebkitTransition = Parallaxer.TRANSITION;
+ window.addEventListener('webkitTransitionEnd', this._onEndTransition.bind(this), true);
+ },
+
+ _onEndTransition: function() {
+ this._stage.style.WebkitTransition = '';
+ this._transitioning = false;
+ },
+
+ _onMouseMove: function(e) {
+ var cursor = {x: e.clientX, y: e.clientY},
+ win = {width: window.innerWidth, height: window.innerHeight},
+ stage = {width: this._stage.offsetWidth, height: this._stage.offsetHeight};
+
+ if (this._lastCursor && !this._transitioning) {
+ var dx = cursor.x - this._lastCursor.x,
+ dy = cursor.y - this._lastCursor.y;
+
+ if (dx * dx + dy * dy > Parallaxer.TRANSITION_DIST_SQ) {
+ this._transition();
+ }
+ }
+ else {
+ this._transition();
+ }
+
+ var x = -(cursor.x / win.width - 0.5) * stage.width * 0.1,
+ y = -(cursor.y / win.height - 0.5) * stage.height * 0.2;
+
+ this._stage.style.WebkitTransform = 'translate(' + x + 'px,' + y + 'px)';
+
+ this._lastCursor = cursor;
+ }
+ };
+
+ window.Parallaxer = Parallaxer;
+})(window);
21 test.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Parallaxer</title>
+ <link rel="stylesheet" type="text/css" href="index.css" />
+ </head>
+ <body>
+ <style type="text/css">
+ @-webkit-keyframes scroll {
+ from {
+ background-position: 0%
+ }
+ to {
+ background-position: 1300%
+ }
+ }
+
+ html {background: url(img/stars.png) repeat-x 0%; -webkit-animation: scroll 10s linear infinite;}
+ </style>
+ </body>
+</html>

0 comments on commit f2b2814

Please sign in to comment.
Something went wrong with that request. Please try again.