Merge branch 'dev'

README.md

@@ -1,6 +1,6 @@
 # lax.js
 
-Simple & light weight (2kb minified & zipped) vanilla javascript plugin to create *smooth* & beautiful animations when you scrolllll! Harness the power of the most intuitive interaction and make your websites come alive!
+Simple & light weight (<2kb gzipped) vanilla javascript plugin to create *smooth* & beautiful animations when you scrolllll! Harness the power of the most intuitive interaction and make your websites come alive!
 
 [>>> DEMO <<<](https://alexfox.dev/laxxx/)
 
@@ -56,7 +56,7 @@ You can also call `lax.removeElement(domElement)` when the component unmounts.
 
 ## 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"`
+The easiest way to get started is to use the presets via the `data-lax-preset` attribute. You can chain multiple presets together for e.g. `data-lax-preset="blurOut fadeOut spin"`. Some presets also support an optional strength e.g. `data-lax-preset="blurOut-50"`
 
 See the list of [Supported Presets](#supported-presets) for details.
 
@@ -130,7 +130,8 @@ You can also use vanilla JS within `( )` for calculations and access to more var
 | zoomInOut | 0.2 |
 | zoomIn | 0.2 |
 | zoomOut | 0.2 |
-
+| swing | 30 |
+| speedy | 30 |
 
 ## Supported Attribute Keys
 
@@ -162,6 +163,15 @@ Filters (note - these may be unperformant on low powered machines)
 | saturate | data-lax-saturate |
 | grayscale | data-lax-grayscale |
 
+Other
+
+| Filter | Key |
+| ------------- | ------------- |
+| background position | data-lax-bg-pos |
+| background position-x | data-lax-bg-pos-x |
+| background position-y | data-lax-bg-pos-y |
+
+
 ## Custom Presets
 To avoid duplicate code you can define your own presets with a list of attributes e.g.
 ```javascript
@@ -179,10 +189,15 @@ You can then access this preset like this:
 </p>
 ```
 
-## Notes
+## Performance Tips
+
+* Avoid nesting lax enabled elements within each other, you'll get better performance using lax with smaller elements in the dom tree.
+* Avoid transforms on large elements, e.g. full screen backgrounds.
+* By default elements that have opacity 0 aren't updated. You can either manually set up a `data-lax-opacity` to control this yourself or use `data-lax-optimize` which will set the elements opacity to 0 when it goes off -screen. 
+* 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 `data-lax-use-gpu="false"` to your element.
 
-### 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.
+
+## Notes
 
 ### 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.
@@ -194,13 +209,12 @@ window.addEventListener("resize", function() {
 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.
+Scroll wheels only increment 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~~
 * Elastic bouncing values at edges of screen (if possible)
-* Optimise: Do not update elements with bounds that are off screen
+* ~~Optimise: Do not update elements with bounds that are off screen~~
 * Implement a tween for scroll wheels to remove reliance on smoothscroll
 * Add "momentum" option 
-* 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?v=1.0.4"></script>
+ <script src="./lib/lax.min.js"></script>
  <!-- <script src="../src/lax.js"></script> -->
 
  <script type="text/javascript">
@@ -183,23 +183,25 @@
  }
 
  .button {
- padding: 10pt 20pt; 
- background: #35D5E5;
+ padding: 10pt 50pt; 
+ background: url(img/button-bg.jpg);
+ background-size: 100pt;
  border-radius: 10pt;
  font-weight: 600;
+ color: black !important;
  }
 
  a {
  text-decoration: none;
  }
 
  a:visited {
- color: white !important;
+ color: black !important;
  }
 
  .button:hover {
  background: white;
- color: #35D5E5 !important;
+ color: black !important;
  cursor: pointer;
  }
 
@@ -210,8 +212,8 @@
 <body>
  <div id="main">
  <div id="header" class="section">
- <img src="./img/l.png" style="width: 103pt; margin-left: 26pt; margin-bottom: -4pt;" data-lax-translate-x="0 0, vh 200" />
- <img src="./img/a.png" data-lax-translate-x="0 0, vh -200" />
+ <img src="./img/l.png" style="width: 103pt; margin-left: 26pt; margin-bottom: -4pt;" data-lax-translate-x="0 0, vh 200" data-lax-optimize=true />
+ <img src="./img/a.png" data-lax-translate-x="0 0, vh -200" data-lax-optimize=true />
  <img src="./img/x.png" data-lax-opacity="0 1, (0.8*vh) 0" />
  <img src="./img/x.png" style="margin-top: -79pt" data-lax-translate-y="0 0, vh 200" data-lax-opacity="0 1, (0.8*vh) 0" />
  <img src="./img/x.png" style="margin-top: -79pt" data-lax-translate-y="0 0, vh 400" data-lax-opacity="0 1, (0.8*vh) 0" />
@@ -245,7 +247,7 @@ <h4 data-lax-opacity="0 1, (vh*0.05) 0">scroll down</h4>
  data-lax-preset="lazy-300"
  ></div>
 
- <h3 data-lax-preset="driftRight" class="chunkyText" style="color: #35D5E5;">oooh!</h3>
+ <h3 data-lax-preset="driftRight" data-lax-optimize=true class="chunkyText" style="color: #35D5E5;">oooh!</h3>
  </div>
 
  <div class="right">
@@ -263,10 +265,10 @@ <h3 data-lax-preset="driftRight" class="chunkyText" style="color: #35D5E5;">oooh
  style="background: #ED2471; margin-left: 20pt; margin-top: 200pt"
  data-lax-preset="lazy-350"
  ></div>
- <h3 data-lax-preset="driftLeft" class="chunkyText" style="color: #ED2471; margin-top: 200pt;">aaah!</h3>
+ <h3 data-lax-optimize=true data-lax-preset="driftLeft" class="chunkyText" style="color: #ED2471; margin-top: 200pt;">aaah!</h3>
  </div>
 
- <h3 data-lax-preset="crazy zoomInOut" class="crazyText">sooo crazy</h3>
+ <h3 data-lax-preset="crazy zoomInOut" class="crazyText" data-lax-optimize=true>sooo crazy</h3>
  </div>
 
  <div id="section2" class="section">
@@ -312,7 +314,7 @@ <h3 data-lax-preset="crazy zoomInOut" class="crazyText">sooo crazy</h3>
  ></div>
  </div>
 
- <h3 data-lax-preset="leftToRight-0.8 fadeInOut" class="chunkyText" style="
+ <h3 data-lax-preset="leftToRight-0.8 speedy" data-lax-optimize=true class="chunkyText" style="
  color: #white; position: absolute; margin-top: -20pt; margin-left: -100pt">
  wheee!
  </h3>
@@ -347,10 +349,10 @@ <h3 data-lax-preset="crazy zoomInOut" class="crazyText">sooo crazy</h3>
  </div>
 
  <div id="section3" class="section">
- <p data-lax-preset="linger">
+ <p data-lax-preset="linger" data-lax-optimize=true>
  Harness the power of scrolling and make your websites come alive!
  </p>
- <a class="button" data-lax-preset="linger" href="https://github.com/alexfoxy/laxxx">
+ <a class="button" data-lax-preset="linger" data-lax-optimize=true data-lax-bg-pos-x="0 0, 3000 1000" href="https://github.com/alexfoxy/laxxx">
  Get lax.js
  </a>
  </div>