added optmize, new presets, background position

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>