Skip to content

Commit

Permalink
Remove requirement for class. Now makes all direct descendants of the…
Browse files Browse the repository at this point in the history 
… scene element a layer.

Resolves issue #204
  • Loading branch information
René Roth committed Jun 29, 2017
1 parent c11dfb0 commit 5ed48e0
Show file tree
Hide file tree
Showing 10 changed files with 70 additions and 58 deletions.
26 changes: 13 additions & 13 deletions README.md
View file
Expand Up @@ -23,16 +23,16 @@ Of course you can also simply copy over the compiled file from the `dist` folder
<script src="dist/parallax.min.js"></script>
```

Create a list of elements giving each item that you want to move within your parallax scene a class of `layer` and a `data-depth` attribute specifying its depth within the scene. A depth of **0** will cause the layer to remain stationary, and a depth of **1** will cause the layer to move by the total effect of the calculated motion. Values inbetween **0** and **1** will cause the layer to move by an amount relative to the supplied ratio.
Give each element within your scene a `data-depth` attribute specifying its depth within the scene. A depth of **0** will cause the layer to remain stationary, and a depth of **1** will cause the layer to move by the total effect of the calculated motion. Values inbetween **0** and **1** will cause the layer to move by an amount relative to the supplied ratio.

```html
<div id="scene">
<div class="layer" data-depth="0.00"><img src="layer1.png"></div>
<div class="layer" data-depth="0.20"><img src="layer2.png"></div>
<div class="layer" data-depth="0.40"><img src="layer3.png"></div>
<div class="layer" data-depth="0.60"><img src="layer4.png"></div>
<div class="layer" data-depth="0.80"><img src="layer5.png"></div>
<div class="layer" data-depth="1.00"><img src="layer6.png"></div>
<div data-depth="0.00"><img src="layer1.png"></div>
<div data-depth="0.20"><img src="layer2.png"></div>
<div data-depth="0.40"><img src="layer3.png"></div>
<div data-depth="0.60"><img src="layer4.png"></div>
<div data-depth="0.80"><img src="layer5.png"></div>
<div data-depth="1.00"><img src="layer6.png"></div>
</div>
```

Expand Down Expand Up @@ -123,12 +123,12 @@ In addition to the behaviours described above, there are the methods `enable()`
data-origin-y="1.0"
data-precision="1"
data-pointer-events="false">
<div class="layer" data-depth="0.00"><img src="graphics/layer1.png"></div>
<div class="layer" data-depth="0.20"><img src="graphics/layer2.png"></div>
<div class="layer" data-depth="0.40"><img src="graphics/layer3.png"></div>
<div class="layer" data-depth="0.60"><img src="graphics/layer4.png"></div>
<div class="layer" data-depth="0.80"><img src="graphics/layer5.png"></div>
<div class="layer" data-depth="1.00"><img src="graphics/layer6.png"></div>
<div data-depth="0.00"><img src="graphics/layer1.png"></div>
<div data-depth="0.20"><img src="graphics/layer2.png"></div>
<div data-depth="0.40"><img src="graphics/layer3.png"></div>
<div data-depth="0.60"><img src="graphics/layer4.png"></div>
<div data-depth="0.80"><img src="graphics/layer5.png"></div>
<div data-depth="1.00"><img src="graphics/layer6.png"></div>
</div>
```

Expand Down
2 changes: 1 addition & 1 deletion examples/assets/styles.scss
View file
Expand Up @@ -102,7 +102,7 @@ input[type=checkbox]:checked + label:before {
}

@for $i from 1 through 6 {
.layer:nth-child(#{$i}) {
.scene > *:nth-child(#{$i}) {
opacity: #{0.15 * $i};

button {
Expand Down
12 changes: 6 additions & 6 deletions examples/pages/callback.html
View file
Expand Up @@ -18,12 +18,12 @@

<div id="container" class="container">
<div id="scene" class="scene">
<div class="layer" data-depth="1.00"><img src="images/layer1.png"></div>
<div class="layer" data-depth="0.80"><img src="images/layer2.png"></div>
<div class="layer" data-depth="0.60"><img src="images/layer3.png"></div>
<div class="layer" data-depth="0.40"><img src="images/layer4.png"></div>
<div class="layer" data-depth="0.20"><img src="images/layer5.png"></div>
<div class="layer" data-depth="0.00"><img src="images/layer6.png"></div>
<div data-depth="1.00"><img src="images/layer1.png"></div>
<div data-depth="0.80"><img src="images/layer2.png"></div>
<div data-depth="0.60"><img src="images/layer3.png"></div>
<div data-depth="0.40"><img src="images/layer4.png"></div>
<div data-depth="0.20"><img src="images/layer5.png"></div>
<div data-depth="0.00"><img src="images/layer6.png"></div>
</div>
</div>

Expand Down
12 changes: 6 additions & 6 deletions examples/pages/hoveronly.html
View file
Expand Up @@ -18,12 +18,12 @@

<div id="container" class="container">
<div id="scene" data-hover-only="true" data-relative-input="true" class="scene border">
<div class="layer" data-depth="1.00"><img src="images/layer1.png"></div>
<div class="layer" data-depth="0.80"><img src="images/layer2.png"></div>
<div class="layer" data-depth="0.60"><img src="images/layer3.png"></div>
<div class="layer" data-depth="0.40"><img src="images/layer4.png"></div>
<div class="layer" data-depth="0.20"><img src="images/layer5.png"></div>
<div class="layer" data-depth="0.00"><img src="images/layer6.png"></div>
<div data-depth="1.00"><img src="images/layer1.png"></div>
<div data-depth="0.80"><img src="images/layer2.png"></div>
<div data-depth="0.60"><img src="images/layer3.png"></div>
<div data-depth="0.40"><img src="images/layer4.png"></div>
<div data-depth="0.20"><img src="images/layer5.png"></div>
<div data-depth="0.00"><img src="images/layer6.png"></div>
</div>
</div>

Expand Down
14 changes: 7 additions & 7 deletions examples/pages/input_element.html
View file
Expand Up @@ -18,18 +18,18 @@

<div class="container" style="float:left">
<div id="scene" class="scene border" data-input-element="#scene-input">
<div class="layer" data-depth="1.00"><img src="images/layer1.png"></div>
<div class="layer" data-depth="0.80"><img src="images/layer2.png"></div>
<div class="layer" data-depth="0.60"><img src="images/layer3.png"></div>
<div class="layer" data-depth="0.40"><img src="images/layer4.png"></div>
<div class="layer" data-depth="0.20"><img src="images/layer5.png"></div>
<div class="layer" data-depth="0.00"><img src="images/layer6.png"></div>
<div data-depth="1.00"><img src="images/layer1.png"></div>
<div data-depth="0.80"><img src="images/layer2.png"></div>
<div data-depth="0.60"><img src="images/layer3.png"></div>
<div data-depth="0.40"><img src="images/layer4.png"></div>
<div data-depth="0.20"><img src="images/layer5.png"></div>
<div data-depth="0.00"><img src="images/layer6.png"></div>
</div>
</div>

<div class="container" style="float:right">
<div id="scene-input" class="scene border">
<div class="layer"><img src="images/layer6.png"></div>
<div><img src="images/layer6.png"></div>
</div>
</div>

Expand Down
12 changes: 6 additions & 6 deletions examples/pages/interactive.html
View file
Expand Up @@ -19,12 +19,12 @@
<div id="container" class="container">
<img class="aspect" src="images/layer2.png">
<div id="scene" class="scene border fill" data-pointer-events="true">
<div class="layer expand-width" data-depth="1.00"><button>layer[6]</button></div>
<div class="layer expand-width" data-depth="0.80"><button>layer[5]</button></div>
<div class="layer expand-width" data-depth="0.60"><button>layer[4]</button></div>
<div class="layer expand-width" data-depth="0.40"><button>layer[3]</button></div>
<div class="layer expand-width" data-depth="0.20"><button>layer[2]</button></div>
<div class="layer expand-width" data-depth="0.00"><button>layer[1]</button></div>
<div class="expand-width" data-depth="1.00"><button>layer[6]</button></div>
<div class="expand-width" data-depth="0.80"><button>layer[5]</button></div>
<div class="expand-width" data-depth="0.60"><button>layer[4]</button></div>
<div class="expand-width" data-depth="0.40"><button>layer[3]</button></div>
<div class="expand-width" data-depth="0.20"><button>layer[2]</button></div>
<div class="expand-width" data-depth="0.00"><button>layer[1]</button></div>
</div>
</div>

Expand Down
12 changes: 6 additions & 6 deletions examples/pages/relative.html
View file
Expand Up @@ -18,12 +18,12 @@

<div id="container" class="container container--offset">
<div id="scene" class="scene border">
<div class="layer" data-depth="1.00"><img src="images/layer1.png"></div>
<div class="layer" data-depth="0.80"><img src="images/layer2.png"></div>
<div class="layer" data-depth="0.60"><img src="images/layer3.png"></div>
<div class="layer" data-depth="0.40"><img src="images/layer4.png"></div>
<div class="layer" data-depth="0.20"><img src="images/layer5.png"></div>
<div class="layer" data-depth="0.00"><img src="images/layer6.png"></div>
<div data-depth="1.00"><img src="images/layer1.png"></div>
<div data-depth="0.80"><img src="images/layer2.png"></div>
<div data-depth="0.60"><img src="images/layer3.png"></div>
<div data-depth="0.40"><img src="images/layer4.png"></div>
<div data-depth="0.20"><img src="images/layer5.png"></div>
<div data-depth="0.00"><img src="images/layer6.png"></div>
</div>
<br>
<input type="checkbox" id="relative" checked>
Expand Down
24 changes: 18 additions & 6 deletions examples/pages/separate_axis_data.html
View file
Expand Up @@ -18,12 +18,24 @@

<div id="container" class="container">
<div id="scene" class="scene">
<div class="layer" data-depth="1.00"><img src="images/layer1.png"></div>
<div class="layer" data-depth-x="0.80" data-depth-y="-0.80"><img src="images/layer2.png"></div>
<div class="layer" data-depth-x="-0.60" data-depth-y="-0.20"><img src="images/layer3.png"></div>
<div class="layer" data-depth="0.40" data-depth-y="-0.30"><img src="images/layer4.png"></div>
<div class="layer" data-depth="0.20"><img src="images/layer5.png"></div>
<div class="layer" data-depth="0.00"><img src="images/layer6.png"></div>
<div data-depth="1.00">
<img src="images/layer1.png">
</div>
<div data-depth-x="0.80" data-depth-y="-0.80">
<img src="images/layer2.png">
</div>
<div data-depth-x="-0.60" data-depth-y="-0.20">
<img src="images/layer3.png">
</div>
<div data-depth="0.40" data-depth-y="-0.30">
<img src="images/layer4.png">
</div>
<div data-depth="0.20">
<img src="images/layer5.png">
</div>
<div data-depth="0.00">
<img src="images/layer6.png">
</div>
</div>
</div>

Expand Down
12 changes: 6 additions & 6 deletions examples/pages/simple.html
View file
Expand Up @@ -18,12 +18,12 @@

<div id="container" class="container">
<div id="scene" class="scene">
<div class="layer" data-depth="1.00"><img src="images/layer1.png"></div>
<div class="layer" data-depth="0.80"><img src="images/layer2.png"></div>
<div class="layer" data-depth="0.60"><img src="images/layer3.png"></div>
<div class="layer" data-depth="0.40"><img src="images/layer4.png"></div>
<div class="layer" data-depth="0.20"><img src="images/layer5.png"></div>
<div class="layer" data-depth="0.00"><img src="images/layer6.png"></div>
<div data-depth="1.00"><img src="images/layer1.png"></div>
<div data-depth="0.80"><img src="images/layer2.png"></div>
<div data-depth="0.60"><img src="images/layer3.png"></div>
<div data-depth="0.40"><img src="images/layer4.png"></div>
<div data-depth="0.20"><img src="images/layer5.png"></div>
<div data-depth="0.00"><img src="images/layer6.png"></div>
</div>
</div>

Expand Down
2 changes: 1 addition & 1 deletion src/parallax.js
View file
Expand Up @@ -281,7 +281,7 @@ class Parallax {
}

updateLayers() {
this.layers = this.element.getElementsByClassName('layer')
this.layers = this.element.children
this.depthsX = []
this.depthsY = []

Expand Down

0 comments on commit 5ed48e0

Please sign in to comment.