diff --git a/README.md b/README.md index ef73cbe..29515aa 100644 --- a/README.md +++ b/README.md @@ -23,16 +23,16 @@ Of course you can also simply copy over the compiled file from the `dist` folder ``` -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
-
-
-
-
-
-
+
+
+
+
+
+
``` @@ -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"> -
-
-
-
-
-
+
+
+
+
+
+
``` diff --git a/examples/assets/styles.scss b/examples/assets/styles.scss index 42240de..5f7b62f 100644 --- a/examples/assets/styles.scss +++ b/examples/assets/styles.scss @@ -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 { diff --git a/examples/pages/callback.html b/examples/pages/callback.html index 3dbef0c..a01b69e 100644 --- a/examples/pages/callback.html +++ b/examples/pages/callback.html @@ -18,12 +18,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/examples/pages/hoveronly.html b/examples/pages/hoveronly.html index ced42f7..773b72f 100644 --- a/examples/pages/hoveronly.html +++ b/examples/pages/hoveronly.html @@ -18,12 +18,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/examples/pages/input_element.html b/examples/pages/input_element.html index 0e26ba6..4f8cc7c 100644 --- a/examples/pages/input_element.html +++ b/examples/pages/input_element.html @@ -18,18 +18,18 @@
-
-
-
-
-
-
+
+
+
+
+
+
-
+
diff --git a/examples/pages/interactive.html b/examples/pages/interactive.html index 5b64d46..a130fd7 100644 --- a/examples/pages/interactive.html +++ b/examples/pages/interactive.html @@ -19,12 +19,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/examples/pages/relative.html b/examples/pages/relative.html index 0f13bde..7e42c40 100644 --- a/examples/pages/relative.html +++ b/examples/pages/relative.html @@ -18,12 +18,12 @@
-
-
-
-
-
-
+
+
+
+
+
+

diff --git a/examples/pages/separate_axis_data.html b/examples/pages/separate_axis_data.html index 0cb7a3c..c76c404 100644 --- a/examples/pages/separate_axis_data.html +++ b/examples/pages/separate_axis_data.html @@ -18,12 +18,24 @@
-
-
-
-
-
-
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
diff --git a/examples/pages/simple.html b/examples/pages/simple.html index 7f71432..b370f21 100644 --- a/examples/pages/simple.html +++ b/examples/pages/simple.html @@ -18,12 +18,12 @@
-
-
-
-
-
-
+
+
+
+
+
+
diff --git a/src/parallax.js b/src/parallax.js index 4261926..1f106bc 100644 --- a/src/parallax.js +++ b/src/parallax.js @@ -281,7 +281,7 @@ class Parallax { } updateLayers() { - this.layers = this.element.getElementsByClassName('layer') + this.layers = this.element.children this.depthsX = [] this.depthsY = []