mirror of
https://github.com/alexfoxy/lax.js.git
synced 2026-04-24 03:01:10 -04:00
Compare commits
6 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
98fa5f9a63 | ||
|
|
47d3e8caa1 | ||
|
|
7a8473be34 | ||
|
|
4cd6de77d9 | ||
|
|
9f9ac92b9d | ||
|
|
2383abd408 |
@@ -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
2
docs/lib/lax.min.js
vendored
File diff suppressed because one or more lines are too long
@@ -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
2
lib/lax.min.js
vendored
File diff suppressed because one or more lines are too long
Binary file not shown.
@@ -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;"
|
||||
},
|
||||
|
||||
@@ -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)` },
|
||||
|
||||
Reference in New Issue
Block a user