6 Commits

Author SHA1 Message Date
Alex Fox
98fa5f9a63 updated docs 2019-04-04 22:30:02 +01:00
Alex Fox
47d3e8caa1 added rotateX and rotateY transforms 2019-04-04 22:28:03 +01:00
Alex Fox
7a8473be34 Merge branch 'master' of https://github.com/alexfoxy/laxx 2019-04-04 18:05:32 +01:00
Alex Fox
4cd6de77d9 fixed version number in src/lax.js 2019-04-04 18:05:17 +01:00
Alex Fox
9f9ac92b9d Update README.md 2019-04-03 20:30:38 +01:00
Alex Fox
2383abd408 fixed demo 2019-04-03 19:31:02 +01:00
7 changed files with 16 additions and 6 deletions

View File

@@ -198,6 +198,8 @@ Transforms
| skewX | data-lax-skew-x |
| skewY | data-lax-skew-y |
| rotate | data-lax-rotate |
| rotateX | data-lax-rotate-x |
| rotateY | data-lax-rotate-y |
Filters (note - these may be unperformant on low powered machines)
@@ -269,7 +271,7 @@ You can then access this preset like this:
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()
lax.updateElements()
});
```
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.

2
docs/lib/lax.min.js vendored

File diff suppressed because one or more lines are too long

View File

@@ -9,7 +9,7 @@ function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d =
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
//
// lax v0.0.1 (Alex Fox)
// lax v1.2.3 (Alex Fox)
// Simple & light weight vanilla javascript plugin to create beautiful animations things when you scrolllll!!
//
// Licensed under the terms of the MIT license.
@@ -64,6 +64,12 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
"data-lax-rotate": function dataLaxRotate(style, v) {
style.transform += " rotate(".concat(v, "deg)");
},
"data-lax-rotate-x": function dataLaxRotateX(style, v) {
style.transform += " rotateX(".concat(v, "deg)");
},
"data-lax-rotate-y": function dataLaxRotateY(style, v) {
style.transform += " rotateY(".concat(v, "deg)");
},
"data-lax-brightness": function dataLaxBrightness(style, v) {
style.filter += " brightness(".concat(v, "%)");
},

2
lib/lax.min.js vendored

File diff suppressed because one or more lines are too long

Binary file not shown.

View File

@@ -1,6 +1,6 @@
{
"name": "lax.js",
"version": "1.2.2",
"version": "1.2.3",
"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;"
},

View File

@@ -1,5 +1,5 @@
//
// lax v0.0.1 (Alex Fox)
// lax v1.2.3 (Alex Fox)
// Simple & light weight vanilla javascript plugin to create beautiful animations things when you scrolllll!!
//
// Licensed under the terms of the MIT license.
@@ -35,6 +35,8 @@
"data-lax-skew-x": (style, v) => { style.transform += ` skewX(${v}deg)` },
"data-lax-skew-y": (style, v) => { style.transform += ` skewY(${v}deg)` },
"data-lax-rotate": (style, v) => { style.transform += ` rotate(${v}deg)` },
"data-lax-rotate-x": (style, v) => { style.transform += ` rotateX(${v}deg)` },
"data-lax-rotate-y": (style, v) => { style.transform += ` rotateY(${v}deg)` },
"data-lax-brightness": (style, v) => { style.filter += ` brightness(${v}%)` },
"data-lax-contrast": (style, v) => { style.filter += ` contrast(${v}%)` },
"data-lax-hue-rotate": (style, v) => { style.filter += ` hue-rotate(${v}deg)` },