Permalink
Browse files

Updated demo to include several parallax effects on one page

  • Loading branch information...
1 parent afa0757 commit acef173ce5b1eb1c60ac3006e8f553f971d7701c @twobit committed Mar 20, 2012
Showing with 23 additions and 3 deletions.
  1. +12 −2 index.css
  2. +11 −1 index.html
View
@@ -4,10 +4,11 @@
.stage .layer {position: absolute; top: 0; left: 50%; background-repeat: no-repeat; background-position: top left; -webkit-transform-style: preserve-3d;}
/* Demo Styles */
+* {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
html {background: #1C2C45;}
+/* Viewport 1 */
#viewport1 {position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-perspective: 100;}
-
#stage1 div.layer {margin-left: -879px; width: 1758px; height: 699px;}
#stage1 a.layer {display: block; top: 200px; margin-left: 250px; width: 193px; height: 162px;}
#stage1 #stars {background-image: url(img/stars.png); -webkit-transform: scale(4) translate3d(0, 0, -300px);}
@@ -22,4 +23,13 @@ html {background: #1C2C45;}
#stage1 #hypernaut {background-image: url(img/hypernaut.png); -webkit-transform: translate3d(0, 0, 0); -webkit-animation: float 3s linear infinite alternate;}
/*#viewport:hover #hypernaut {-webkit-transform: translate3d(0, 0, 10px);}*/
-#content {position: relative; max-width: 470px; min-height: 400px; margin: 100px auto; background: #D9D9B8; border-radius: 10px;}
+#content {position: relative; max-width: 470px; min-height: 400px; margin: 100px auto; background: #D9D9B8; border-radius: 10px; padding: 10px;}
+
+
+/* Viewport 2 */
+#viewport2 {background: #1C2C45; height: 150px; -webkit-perspective: 100;}
+#stage2 .layer {margin-left: -879px; width: 1758px; height: 699px;}
+#stage2 #stars2 {background-image: url(img/stars.png); -webkit-transform: scale(4) translate3d(0, 0, -300px);}
+#stage2 #gas2 {background-image: url(img/gas.png); -webkit-transform: scale(3) translate3d(0, 0, -200px);}
+#stage2 #planets2 {background-image: url(img/planets.png); -webkit-transform: scale(2) translate3d(0, 0, -100px);}
+#stage2 #hypernaut2 {background-image: url(img/hypernaut.png); -webkit-transform: translate3d(0, 0, 0); margin-top: 0; margin-left: 250px;}
View
@@ -14,13 +14,23 @@
</div>
</div>
- <div id="content"></div>
+ <div id="content">
+ <div id="viewport2" class="viewport">
+ <div id="stage2" class="stage">
+ <div id="stars2" class="layer"></div>
+ <div id="gas2" class="layer"></div>
+ <div id="planets2" class="layer"></div>
+ <a id="hypernaut2" href="#" class="layer"></a>
+ </div>
+ </div>
+ </div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="js/parallaxer.js"></script>
<script type="text/javascript">
$(document).ready(function() {
new Parallaxer(document.getElementById('stage1'));
+ new Parallaxer(document.getElementById('stage2'), .9, .9);
});
</script>
</body>

0 comments on commit acef173

Please sign in to comment.