Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

added new images, updated docs

  • Loading branch information...
commit ad4e8593075b6566f35f12f9b083b5d8bbb01642 1 parent 3c7304b
@twobit authored
View
51 README.md
@@ -2,31 +2,60 @@
## CSS3 Parallax
-Takes advantage of CSS3 3D transforms to create a real parallax effect. Responds to mouse movement or device motion.
+Takes advantage of CSS3 3D transforms to create a real parallax effect. Responds to mouse movement. Device motion will be supported soon.
-## Quick Examples
+## Quick Example
+
+Setup the viewport, stage, and layers:
```html
-<div id="viewport1" class="viewport">
- <div id="stage1" class="stage">
- <div id="stars" class="layer"></div>
- <div id="gas" class="layer"></div>
- <div id="planets" class="layer"></div>
+<div id="viewport" class="viewport">
+ <div id="stage" class="stage">
+ <div class="red layer"></div>
+ <div class="green layer"></div>
+ <div class="blue layer"></div>
</div>
</div>
+
+<div id="nested">
+ <div id="nested_viewport" class="viewport">
+ <div id="nested_stage" class="stage">
+ <div class="red layer"></div>
+ <div class="green layer"></div>
+ <div class="blue layer"></div>
+ </div>
+ </div>
+
+ <p>Nested Parallax</p>
+</div>
```
+Add styling:
+
```css
+/* Required Parallaxer Styles */
.viewport {position: relative; overflow: hidden;}
.stage {position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform-style: preserve-3d;}
.stage .layer {position: absolute; top: 0; left: 50%; background-repeat: no-repeat; background-position: top left; -webkit-transform-style: preserve-3d;}
+
+/* Demo Styles */
+#viewport {position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-perspective: 100;}
+#stage .layer {margin-left: -1000px; width: 2000px; height: 2000px;}
+
+.red {background-image: url(img/red.png); -webkit-transform: scale(4) translate3d(0, 0, -300px);}
+.green {background-image: url(img/green.png); -webkit-transform: scale(3) translate3d(0, 0, -200px);}
+.blue {background-image: url(img/blue.png); -webkit-transform: scale(2) translate3d(0, 0, -100px);}
```
+Include parallaxer.js and init:
+
```javascript
-new Parallaxer(document.getElementById('stage1'), {invert: true});
-new Parallaxer(document.getElementById('stage2'), {xRange: 400, yRange: 400});
+new Parallaxer(document.getElementById('stage'), {invert: true});
+new Parallaxer(document.getElementById('nested_stage'), {xRange: 400, yRange: 400});
```
+See demo for working example.
+
## Documentation
<a name="Parallaxer" />
@@ -46,8 +75,8 @@ __Arguments__
__Example__
```javascript
-new Parallaxer(document.getElementById('stage1'), {invert: true});
-new Parallaxer(document.getElementById('stage2'), {xRange: 400, yRange: 400});
+new Parallaxer(document.getElementById('stage'), {invert: true});
+new Parallaxer(document.getElementById('nested_stage'), {xRange: 400, yRange: 400});
```
## Browser Support
View
BIN  examples/demo/img/gas.png
Deleted file not rendered
View
BIN  examples/demo/img/hypernaut.png
Deleted file not rendered
View
BIN  examples/demo/img/planets.png
Deleted file not rendered
View
BIN  examples/demo/img/stars.png
Deleted file not rendered
View
37 examples/demo/index.css
@@ -1,34 +1,17 @@
-/* Parallaxer Styles */
+/* Required Parallaxer Styles */
.viewport {position: relative; overflow: hidden;}
.stage {position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-transform-style: preserve-3d;}
.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 {position: absolute; top: 0; left: 0; right: 0; bottom: 0; -webkit-perspective: 100;}
+#stage .layer {margin-left: -1000px; width: 2000px; height: 2000px;}
-/* 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);}
-#stage1 #gas {background-image: url(img/gas.png); -webkit-transform: scale(3) translate3d(0, 0, -200px);}
-#stage1 #planets {background-image: url(img/planets.png); -webkit-transform: scale(2) translate3d(0, 0, -100px);}
-@-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;}
-}
-#stage1 #hypernaut {background-image: url(img/hypernaut.png); -webkit-transform: translate3d(0, 0, 0); -webkit-animation: float 3s linear infinite alternate;}
+.red {background-image: url(img/red.png); -webkit-transform: scale(4) translate3d(0, 0, -300px);}
+.green {background-image: url(img/green.png); -webkit-transform: scale(3) translate3d(0, 0, -200px);}
+.blue {background-image: url(img/blue.png); -webkit-transform: scale(2) translate3d(0, 0, -100px);}
-/*#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; 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;}
+/* Nested Parallax */
+#nested {position: relative; margin: 100px auto; width: 900px; background: #DDD; border-radius: 10px; padding: 10px; border: 1px solid #AAA;}
+#nested_viewport {background: #FFF; height: 150px; -webkit-perspective: 100;}
+#nested_stage .layer {margin-left: -1000px; width: 2000px; height: 2000px;}
View
30 examples/demo/index.html
@@ -5,32 +5,32 @@
<link rel="stylesheet" type="text/css" href="index.css" />
</head>
<body>
- <div id="viewport1" class="viewport">
- <div id="stage1" class="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 id="viewport" class="viewport">
+ <div id="stage" class="stage">
+ <div class="red layer"></div>
+ <div class="green layer"></div>
+ <div class="blue layer"></div>
</div>
</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 id="nested">
+ <div id="nested_viewport" class="viewport">
+ <div id="nested_stage" class="stage">
+ <div class="red layer"></div>
+ <div class="green layer"></div>
+ <div class="blue layer"></div>
</div>
</div>
+
+ <p>Nested Parallax</p>
</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="../../parallaxer.js"></script>
<script type="text/javascript">
$(document).ready(function() {
- new Parallaxer(document.getElementById('stage1'), {invert: true});
- new Parallaxer(document.getElementById('stage2'), {xRange: 400, yRange: 400});
+ new Parallaxer(document.getElementById('stage'), {invert: true});
+ new Parallaxer(document.getElementById('nested_stage'), {xRange: 400, yRange: 400});
});
</script>
</body>
View
3  parallaxer.js
@@ -14,9 +14,12 @@
var self = this;
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);
Please sign in to comment.
Something went wrong with that request. Please try again.