Merge branch 'master' of https://github.com/alexfoxy/laxx

fixed implement dependency

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Alex Fox
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -8,14 +8,23 @@ Simple & light weight (2kb minified & zipped) vanilla javascript plugin to creat
 
 ## Getting started
 
+### NPM setup
+
+```bash
+npm install lax.js
+```
+```js
+import lax from 'lax.js'
+```
+
+### Basic browser setup
 1) Add lax.js to your html
 
 ```html
 <script src="lib/lax.min.js" >
 ```
 
-
-2) Initialize the plugin 
+2) Initialize the plugin
 
 ```javascript
 window.onload = function() {
@@ -37,6 +46,11 @@ window.onload = function() {
 
 4) Scroll and enjoy!
 
+### Dealing with DOM changes
+lax builds a list of all elements it needs to control when the page loads so if they are added to the DOM subsequently they won't be updated on page scroll. If you're using a library like React or vue.js, it is likely that not all elements are in the dom on page load. Because of this you will need to call `lax.populateElements()` when you add elements to the DOM that you want to animate. 
+
+For example `componentDidMount() // React` or `created() // vue.js`. 
+
 ## Presets
 
 The easiest way to get started is to use the presets via the `data-lax-preset` attribute. You can chain multiple presetes together for e.g. `data-lax-preset="blurOut fadeOut spin"`. Some presets also support an optional strength e.g. `data-lax-preset="blurOut-50"`
@@ -78,11 +92,12 @@ You can use these instead of integer values for the scrollPos  e.g.
 </p>
 ```
 
-You can also do calculations using `( )` e.g.
+You can also use vanilla JS within `( )` for calculations and access to more variables e.g.
 ```html
-<p data-lax-opacity="0 1, (vh*0.5) 0">
+<p data-lax-opacity="0 1, (document.body.scrollHeight*0.5) 0">
 	I fade out as the page scrolls down and
-	I'm gone when the page has scrolled half the view port height!
+	I'm gone when the page has scrolled 50%
+	down the entire page height!
 </p>
 ```
 ## Supported Presets
@@ -166,14 +181,24 @@ You can then access this preset like this:
 ### Performance
 By default `-webkit-backface-visibility: hidden;` is added to your elements style to encourage the browser to render that object as a layer on the GPU and increase performance. To turn this off add `lax-optimize="false"` to your element.
 
+### Screen rotating & resizing 
+As some values (vh, vw, elh, elw) are calculated on load, when the screen size changes or rotates you might want to recalculate these. E.g.
+```
+window.addEventListener("resize", function() {
+	lax.populateElements()
+});
+```
+Be warned, on mobile, a resize event is fired when you scroll and the toolbar is hidden so you might want to check if the width or orientation has changed.
+
 ### Scroll Wheels
 Scroll wheels only icrement the scroll position in steps which can cause the animations to look janky. You can use the SmoothScroll (http://www.smoothscroll.net/) plugin to smooth this out, however there maybe performance implications that need investigating.
 
 ## To Do / Ideas
+* Re-calculate values on rotate / change window size
 * Add debug mode
 * Elastic bouncing values
 * Optimise elements that go off screen
-* Impliment a tween for scroll wheels to remove dependancy on smoothscroll
+* Implement a tween for scroll wheels to remove dependency on smoothscroll
 * Better error reporting
 * Add "momentum" as option for anchor & presets
 * Move presets to lax-presets.js to reduce base library size

docs/index.html

@@ -6,7 +6,7 @@
   <link href="https://fonts.googleapis.com/css?family=Montserrat:300,600,800" rel="stylesheet">
   <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
 
-  <script src="./lib/lax.min.js"></script>
+  <script src="./lib/lax.min.js?v=1.0.4"></script>
   <!-- <script src="../src/lax.js"></script> -->
 
   <script type="text/javascript">
@@ -19,6 +19,13 @@
         lax.update(window.scrollY)
       }, false)
 
+      let w = window.innerWidth
+      window.addEventListener("resize", function() {
+        if(w !== window.innerWidth) {
+          lax.populateElements()
+        }
+      });
+
       lax.update(window.scrollY)
     }
   </script>
@@ -48,8 +55,8 @@
       align-items: center;
       justify-content: center;
       width: 100vw;
-      margin-top: 20vh;
       z-index: 2;
+      height: 100vh;
     }
 
     .bg {
@@ -61,12 +68,12 @@
     }
 
     #header img {
-      width: 14vh;
-      margin-top: 2vh;
+      width: 78pt;
+      margin-top: 12pt;
     }
 
     #header h2 {
-      margin-top: 12vh;
+      margin-top: 60pt;
       font-size: 24pt;
       font-weight: 600;
       text-align: center;
@@ -203,14 +210,14 @@
 <body>
   <div id="main">
     <div id="header" class="section" data-lax-opacity="0 1, (0.8*vh) 0">
-      <img src="./img/l.svg" style="width: 19vh; margin-left: 5vh;" data-lax-translate-x="0 0, vh 200" />
+      <img src="./img/l.svg" style="width: 103pt; margin-left: 26pt; margin-bottom: -4pt;" data-lax-translate-x="0 0, vh 200" />
       <img src="./img/a.svg" data-lax-translate-x="0 0, vh -200" />
       <img src="./img/x.svg" />
-      <img src="./img/x.svg" style="margin-top: -14vh" data-lax-translate-y="0 0, vh 200" />
-      <img src="./img/x.svg" style="margin-top: -14vh" data-lax-translate-y="0 0, vh 400" />
-      <img src="./img/x.svg" style="margin-top: -14vh" data-lax-translate-y="0 0, vh 600" />
-      <img src="./img/x.svg" style="margin-top: -14vh" data-lax-translate-y="0 0, vh 800" />
-      <img src="./img/x.svg" style="margin-top: -14vh" data-lax-translate-y="0 0, vh 1000" />
+      <img src="./img/x.svg" style="margin-top: -79pt" data-lax-translate-y="0 0, vh 200" />
+      <img src="./img/x.svg" style="margin-top: -79pt" data-lax-translate-y="0 0, vh 400" />
+      <img src="./img/x.svg" style="margin-top: -79pt" data-lax-translate-y="0 0, vh 600" />
+      <img src="./img/x.svg" style="margin-top: -79pt" data-lax-translate-y="0 0, vh 800" />
+      <img src="./img/x.svg" style="margin-top: -79pt" data-lax-translate-y="0 0, vh 1000" />
       <h2 data-lax-scale="0 1, vh 0.2" data-lax-translate-y="0 0, vh 1200" data-lax-opacity="0 1, (vh*0.5) 0">awesum scroll effects</h2>
 
       <h4 data-lax-opacity="0 1, (vh*0.05) 0">scroll down</h4>

lib/lax.js

@@ -232,10 +232,11 @@
     }
 
     lax.setup = function (o) {
-      lax.populateObjects();
+      lax.populateElements();
     };
 
-    lax.populateObjects = function () {
+    lax.populateElements = function () {
+      lax.elements = [];
       var selector = Object.keys(transforms).map(function (t) {
         return "[".concat(t, "]");
       }).join(",");

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "lax.js",
-	"version": "1.0.2",
+	"version": "1.0.4",
 	"scripts": {
 		"build": "babel src -d lib; uglifyjs lib/lax.js -o lib/lax.min.js -c -m; gzip < lib/lax.min.js > lib/lax.min.js.gz"
 	},
@@ -16,7 +16,7 @@
 	  "type" : "git",
 	  "url" : "https://github.com/alexfoxy/laxxx"
 	},
-	"main": "index.js",
+	"main": "lib/lax.min.js",
 	"keywords": [
 		"javascript",
 		"parallax",

src/lax.js

@@ -140,10 +140,13 @@
     }
 
     lax.setup = function(o) {
-      lax.populateObjects()
+      lax.populateElements()
     }
 
-    lax.populateObjects = function() {
+    lax.populateElements = function() {
+      lax.elements = []
+
+
       var selector = Object.keys(transforms).map(t => `[${t}]`).join(",")
       selector += ",[data-lax-preset]"