mirror of
https://github.com/alexfoxy/lax.js.git
synced 2026-04-24 03:01:10 -04:00
Compare commits
12 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
08e3719a29 | ||
|
|
525038a120 | ||
|
|
486fba4f73 | ||
|
|
3f5f639a0a | ||
|
|
a7d0dc2786 | ||
|
|
1cf990e757 | ||
|
|
152f4cfea2 | ||
|
|
ebebf08233 | ||
|
|
12fd8e0a95 | ||
|
|
a7792fea66 | ||
|
|
86741cce86 | ||
|
|
2b0aad1eaf |
19
README.md
19
README.md
@@ -1,20 +1,30 @@
|
||||
# lax.js
|
||||
|
||||
Simple & light weight (2kb minified & zipped) vanilla javascript plugin to create beautiful animations when you scrolllll! Harness the power of the most intuitive interaction and make your websites come alive!
|
||||
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!
|
||||
|
||||
[>>> DEMO <<<](https://alexfox.dev/lax/)
|
||||
[>>> DEMO <<<](https://alexfox.dev/laxxx/)
|
||||
|
||||
|
||||
|
||||
## 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() {
|
||||
@@ -175,4 +185,5 @@ Scroll wheels only icrement the scroll position in steps which can cause the ani
|
||||
* Impliment a tween for scroll wheels to remove dependancy on smoothscroll
|
||||
* Better error reporting
|
||||
* Add "momentum" as option for anchor & presets
|
||||
* Move presets to lax-presets.js to reduce base library size
|
||||
|
||||
|
||||
290
docs/index.html
290
docs/index.html
@@ -11,6 +11,8 @@
|
||||
|
||||
<script type="text/javascript">
|
||||
window.onload = function() {
|
||||
document.getElementById("main").classList.add("loaded")
|
||||
|
||||
lax.setup()
|
||||
|
||||
document.addEventListener('scroll', function(x) {
|
||||
@@ -30,6 +32,15 @@
|
||||
overflow-x: hidden;
|
||||
font-family: 'Montserrat', sans-serif;
|
||||
}
|
||||
|
||||
#main {
|
||||
opacity: 0;
|
||||
transition: opacity 200ms;
|
||||
}
|
||||
|
||||
#main.loaded {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#header {
|
||||
display: flex;
|
||||
@@ -171,12 +182,6 @@
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background: white;
|
||||
color: #35D5E5;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
@@ -185,157 +190,164 @@
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background: white;
|
||||
color: #35D5E5 !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
||||
|
||||
<body>
|
||||
<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/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" />
|
||||
<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>
|
||||
<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/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" />
|
||||
<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>
|
||||
<i class="fas fa-chevron-down"
|
||||
data-lax-opacity="0 1, (vh*0.1) 0"
|
||||
data-lax-translate-y="0 0, 200 100">
|
||||
</i>
|
||||
</div>
|
||||
|
||||
|
||||
<div id="section1" class="section">
|
||||
<div class="left">
|
||||
<div class="bubble a"
|
||||
style="background: #EDD943"
|
||||
data-lax-preset="lazy-250"
|
||||
></div>
|
||||
|
||||
<div class="bubble c"
|
||||
style="background: #ED2471; margin-left: 80pt"
|
||||
data-lax-preset="lazy-100"
|
||||
></div>
|
||||
|
||||
<div class="bubble b"
|
||||
style="background: #35D5E5; margin-left: 160pt"
|
||||
data-lax-preset="lazy-300"
|
||||
></div>
|
||||
|
||||
<h3 data-lax-preset="driftRight" class="chunkyText" style="color: #35D5E5;">oooh!</h3>
|
||||
<h4 data-lax-opacity="0 1, (vh*0.05) 0">scroll down</h4>
|
||||
<i class="fas fa-chevron-down"
|
||||
data-lax-opacity="0 1, (vh*0.1) 0"
|
||||
data-lax-translate-y="0 0, 200 100">
|
||||
</i>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
|
||||
<div id="section1" class="section">
|
||||
<div class="left">
|
||||
<div class="bubble a"
|
||||
style="background: #35D5E5; margin-left: 120pt"
|
||||
data-lax-preset="lazy-200"
|
||||
style="background: #EDD943"
|
||||
data-lax-preset="lazy-250"
|
||||
></div>
|
||||
|
||||
<div class="bubble c"
|
||||
style="background: #EDD943; margin-left: -20pt"
|
||||
data-lax-preset="lazy-150"
|
||||
style="background: #ED2471; margin-left: 80pt"
|
||||
data-lax-preset="lazy-100"
|
||||
></div>
|
||||
|
||||
<div class="bubble b"
|
||||
style="background: #ED2471; margin-left: 20pt; margin-top: 200pt"
|
||||
data-lax-preset="lazy-350"
|
||||
style="background: #35D5E5; margin-left: 160pt"
|
||||
data-lax-preset="lazy-300"
|
||||
></div>
|
||||
<h3 data-lax-preset="driftLeft" class="chunkyText" style="color: #ED2471; margin-top: 200pt;">aaah!</h3>
|
||||
|
||||
<h3 data-lax-preset="driftRight" class="chunkyText" style="color: #35D5E5;">oooh!</h3>
|
||||
</div>
|
||||
|
||||
<div class="right">
|
||||
<div class="bubble a"
|
||||
style="background: #35D5E5; margin-left: 120pt"
|
||||
data-lax-preset="lazy-200"
|
||||
></div>
|
||||
|
||||
<div class="bubble c"
|
||||
style="background: #EDD943; margin-left: -20pt"
|
||||
data-lax-preset="lazy-150"
|
||||
></div>
|
||||
|
||||
<div class="bubble b"
|
||||
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>
|
||||
</div>
|
||||
|
||||
<h3 data-lax-preset="crazy zoomInOut" class="crazyText">sooo crazy</h3>
|
||||
</div>
|
||||
|
||||
<div id="section2" class="section">
|
||||
<div class="blockContainer" data-lax-preset="leftToRight-1.1 fadeInOut">
|
||||
<div class="block"
|
||||
style="background: #35D5E5;"
|
||||
data-lax-preset="spin"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="blockContainer" data-lax-preset="leftToRight-1.2 fadeInOut">
|
||||
<div class="block"
|
||||
style="background: #EDD943; margin-top: -50pt; margin-left: -50pt; width: 40pt; height: 40pt;"
|
||||
data-lax-preset="spinRev-500"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="blockContainer" data-lax-preset="leftToRight-1.4 fadeInOut">
|
||||
<div class="block"
|
||||
style="background: #ED2471; margin-top: -90pt; margin-left: -0pt;"
|
||||
data-lax-preset="spin-500"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="blockContainer" data-lax-preset="leftToRight-1.5 fadeInOut">
|
||||
<div class="block"
|
||||
style="background: #EDD943; margin-top: 70pt; margin-left: -150pt; width: 40pt; height: 40pt;"
|
||||
data-lax-preset="spinRev-500"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="blockContainer" data-lax-preset="leftToRight-1.3 fadeInOut">
|
||||
<div class="block"
|
||||
style="background: #EDD943; margin-top: 100pt; margin-left: -60pt; width: 25pt; height: 25pt;"
|
||||
data-lax-preset="spin-500"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="blockContainer" data-lax-preset="leftToRight-1.05 fadeInOut">
|
||||
<div class="block"
|
||||
style="background: #ED2471; margin-top: -30pt; margin-left: -70pt;"
|
||||
data-lax-preset="spin"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<h3 data-lax-preset="leftToRight-0.8 fadeInOut" class="chunkyText" style="
|
||||
color: #white; position: absolute; margin-top: -20pt; margin-left: -100pt">
|
||||
wheee!
|
||||
</h3>
|
||||
|
||||
<div class="blockContainer" data-lax-preset="leftToRight-1.15 fadeInOut">
|
||||
<div class="block"
|
||||
style="background: #35D5E5; margin-top: -70pt; margin-left: -20pt; width: 40pt; height: 40pt;"
|
||||
data-lax-preset="spinRev-500"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="blockContainer" data-lax-preset="leftToRight-1.45 fadeInOut">
|
||||
<div class="block"
|
||||
style="background: #ED2471; margin-top: -50pt; margin-left: -50pt; width: 25pt; height: 25pt;"
|
||||
data-lax-preset="spin-500"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="blockContainer" data-lax-preset="leftToRight-1.5 fadeInOut">
|
||||
<div class="block"
|
||||
style="background: #35D5E5; margin-top: 30pt; margin-left: -20pt;"
|
||||
data-lax-preset="spinRev-500"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="blockContainer" data-lax-preset="leftToRight-1.25 fadeInOut">
|
||||
<div class="block"
|
||||
style="background: #ED2471; margin-top: 80pt; margin-left: -10pt;"
|
||||
data-lax-preset="spin-500"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="section3" class="section">
|
||||
<p data-lax-preset="linger">
|
||||
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">
|
||||
Get lax.js
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<h3 data-lax-preset="crazy zoomInOut" class="crazyText">sooo crazy</h3>
|
||||
</div>
|
||||
|
||||
<div id="section2" class="section">
|
||||
<div class="blockContainer" data-lax-preset="leftToRight-1.1 fadeInOut">
|
||||
<div class="block"
|
||||
style="background: #35D5E5;"
|
||||
data-lax-preset="spin"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="blockContainer" data-lax-preset="leftToRight-1.2 fadeInOut">
|
||||
<div class="block"
|
||||
style="background: #EDD943; margin-top: -50pt; margin-left: -50pt; width: 40pt; height: 40pt;"
|
||||
data-lax-preset="spinRev-500"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="blockContainer" data-lax-preset="leftToRight-1.4 fadeInOut">
|
||||
<div class="block"
|
||||
style="background: #ED2471; margin-top: -90pt; margin-left: -0pt;"
|
||||
data-lax-preset="spin-500"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="blockContainer" data-lax-preset="leftToRight-1.5 fadeInOut">
|
||||
<div class="block"
|
||||
style="background: #EDD943; margin-top: 70pt; margin-left: -150pt; width: 40pt; height: 40pt;"
|
||||
data-lax-preset="spinRev-500"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="blockContainer" data-lax-preset="leftToRight-1.3 fadeInOut">
|
||||
<div class="block"
|
||||
style="background: #EDD943; margin-top: 100pt; margin-left: -60pt; width: 25pt; height: 25pt;"
|
||||
data-lax-preset="spin-500"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="blockContainer" data-lax-preset="leftToRight-1.05 fadeInOut">
|
||||
<div class="block"
|
||||
style="background: #ED2471; margin-top: -30pt; margin-left: -70pt;"
|
||||
data-lax-preset="spin"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<h3 data-lax-preset="leftToRight-0.8 fadeInOut" class="chunkyText" style="
|
||||
color: #white; position: absolute; margin-top: -20pt; margin-left: -100pt">
|
||||
wheee!
|
||||
</h3>
|
||||
|
||||
<div class="blockContainer" data-lax-preset="leftToRight-1.15 fadeInOut">
|
||||
<div class="block"
|
||||
style="background: #35D5E5; margin-top: -70pt; margin-left: -20pt; width: 40pt; height: 40pt;"
|
||||
data-lax-preset="spinRev-500"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="blockContainer" data-lax-preset="leftToRight-1.45 fadeInOut">
|
||||
<div class="block"
|
||||
style="background: #ED2471; margin-top: -50pt; margin-left: -50pt; width: 25pt; height: 25pt;"
|
||||
data-lax-preset="spin-500"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="blockContainer" data-lax-preset="leftToRight-1.5 fadeInOut">
|
||||
<div class="block"
|
||||
style="background: #35D5E5; margin-top: 30pt; margin-left: -20pt;"
|
||||
data-lax-preset="spinRev-500"
|
||||
></div>
|
||||
</div>
|
||||
|
||||
<div class="blockContainer" data-lax-preset="leftToRight-1.25 fadeInOut">
|
||||
<div class="block"
|
||||
style="background: #ED2471; margin-top: 80pt; margin-left: -10pt;"
|
||||
data-lax-preset="spin-500"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="section3" class="section">
|
||||
<p data-lax-preset="linger">
|
||||
Harness the power of scrolling and make your websites come alive!
|
||||
</p>
|
||||
<a class="button" data-lax-preset="linger" href="https://github.com/alexfoxy/lax">
|
||||
Get lax.js
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</body>
|
||||
|
||||
600
lib/lax.js
600
lib/lax.js
@@ -15,319 +15,325 @@
|
||||
// without getting a written permission first.
|
||||
//
|
||||
(function () {
|
||||
var lax = {};
|
||||
window.lax = lax;
|
||||
var parallaxObjects = [];
|
||||
var transforms = {
|
||||
"data-lax-opacity": function dataLaxOpacity(style, v) {
|
||||
style.opacity = v;
|
||||
},
|
||||
"data-lax-translate": function dataLaxTranslate(style, v) {
|
||||
style.transform += " translate(".concat(v, "px, ").concat(v, "px)");
|
||||
},
|
||||
"data-lax-translate-x": function dataLaxTranslateX(style, v) {
|
||||
style.transform += " translateX(".concat(v, "px)");
|
||||
},
|
||||
"data-lax-translate-y": function dataLaxTranslateY(style, v) {
|
||||
style.transform += " translateY(".concat(v, "px)");
|
||||
},
|
||||
"data-lax-scale": function dataLaxScale(style, v) {
|
||||
style.transform += " scale(".concat(v, ")");
|
||||
},
|
||||
"data-lax-scale-x": function dataLaxScaleX(style, v) {
|
||||
style.transform += " scaleX(".concat(v, ")");
|
||||
},
|
||||
"data-lax-scale-y": function dataLaxScaleY(style, v) {
|
||||
style.transform += " scaleY(".concat(v, ")");
|
||||
},
|
||||
"data-lax-skew": function dataLaxSkew(style, v) {
|
||||
style.transform += " skew(".concat(v, "deg, ").concat(v, "deg)");
|
||||
},
|
||||
"data-lax-skew-x": function dataLaxSkewX(style, v) {
|
||||
style.transform += " skewX(".concat(v, "deg)");
|
||||
},
|
||||
"data-lax-skew-y": function dataLaxSkewY(style, v) {
|
||||
style.transform += " skewY(".concat(v, "deg)");
|
||||
},
|
||||
"data-lax-rotate": function dataLaxRotate(style, v) {
|
||||
style.transform += " rotate(".concat(v, "deg)");
|
||||
},
|
||||
"data-lax-brightness": function dataLaxBrightness(style, v) {
|
||||
style.filter += " brightness(".concat(v, "%)");
|
||||
},
|
||||
"data-lax-contrast": function dataLaxContrast(style, v) {
|
||||
style.filter += " contrast(".concat(v, "%)");
|
||||
},
|
||||
"data-lax-hue-rotate": function dataLaxHueRotate(style, v) {
|
||||
style.filter += " hue-rotate(".concat(v, "deg)");
|
||||
},
|
||||
"data-lax-blur": function dataLaxBlur(style, v) {
|
||||
style.filter += " blur(".concat(v, "px)");
|
||||
},
|
||||
"data-lax-invert": function dataLaxInvert(style, v) {
|
||||
style.filter += " invert(".concat(v, "%)");
|
||||
},
|
||||
"data-lax-saturate": function dataLaxSaturate(style, v) {
|
||||
style.filter += " saturate(".concat(v, "%)");
|
||||
},
|
||||
"data-lax-grayscale": function dataLaxGrayscale(style, v) {
|
||||
style.filter += " grayscale(".concat(v, "%)");
|
||||
}
|
||||
};
|
||||
var _crazy = "";
|
||||
var lax = function () {
|
||||
var lax = {
|
||||
elements: []
|
||||
};
|
||||
var transforms = {
|
||||
"data-lax-opacity": function dataLaxOpacity(style, v) {
|
||||
style.opacity = v;
|
||||
},
|
||||
"data-lax-translate": function dataLaxTranslate(style, v) {
|
||||
style.transform += " translate(".concat(v, "px, ").concat(v, "px)");
|
||||
},
|
||||
"data-lax-translate-x": function dataLaxTranslateX(style, v) {
|
||||
style.transform += " translateX(".concat(v, "px)");
|
||||
},
|
||||
"data-lax-translate-y": function dataLaxTranslateY(style, v) {
|
||||
style.transform += " translateY(".concat(v, "px)");
|
||||
},
|
||||
"data-lax-scale": function dataLaxScale(style, v) {
|
||||
style.transform += " scale(".concat(v, ")");
|
||||
},
|
||||
"data-lax-scale-x": function dataLaxScaleX(style, v) {
|
||||
style.transform += " scaleX(".concat(v, ")");
|
||||
},
|
||||
"data-lax-scale-y": function dataLaxScaleY(style, v) {
|
||||
style.transform += " scaleY(".concat(v, ")");
|
||||
},
|
||||
"data-lax-skew": function dataLaxSkew(style, v) {
|
||||
style.transform += " skew(".concat(v, "deg, ").concat(v, "deg)");
|
||||
},
|
||||
"data-lax-skew-x": function dataLaxSkewX(style, v) {
|
||||
style.transform += " skewX(".concat(v, "deg)");
|
||||
},
|
||||
"data-lax-skew-y": function dataLaxSkewY(style, v) {
|
||||
style.transform += " skewY(".concat(v, "deg)");
|
||||
},
|
||||
"data-lax-rotate": function dataLaxRotate(style, v) {
|
||||
style.transform += " rotate(".concat(v, "deg)");
|
||||
},
|
||||
"data-lax-brightness": function dataLaxBrightness(style, v) {
|
||||
style.filter += " brightness(".concat(v, "%)");
|
||||
},
|
||||
"data-lax-contrast": function dataLaxContrast(style, v) {
|
||||
style.filter += " contrast(".concat(v, "%)");
|
||||
},
|
||||
"data-lax-hue-rotate": function dataLaxHueRotate(style, v) {
|
||||
style.filter += " hue-rotate(".concat(v, "deg)");
|
||||
},
|
||||
"data-lax-blur": function dataLaxBlur(style, v) {
|
||||
style.filter += " blur(".concat(v, "px)");
|
||||
},
|
||||
"data-lax-invert": function dataLaxInvert(style, v) {
|
||||
style.filter += " invert(".concat(v, "%)");
|
||||
},
|
||||
"data-lax-saturate": function dataLaxSaturate(style, v) {
|
||||
style.filter += " saturate(".concat(v, "%)");
|
||||
},
|
||||
"data-lax-grayscale": function dataLaxGrayscale(style, v) {
|
||||
style.filter += " grayscale(".concat(v, "%)");
|
||||
}
|
||||
};
|
||||
var _crazy = "";
|
||||
|
||||
for (var i = 0; i < 100; i++) {
|
||||
_crazy += " " + window.innerHeight * (i / 100) + " " + Math.random() * 360 + ", ";
|
||||
}
|
||||
|
||||
lax.presets = {
|
||||
linger: function linger(v) {
|
||||
return {
|
||||
"data-lax-translate-y": "(vh*0.7) 0, 0 200, -500 0"
|
||||
};
|
||||
},
|
||||
lazy: function lazy() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;
|
||||
return {
|
||||
"data-lax-translate-y": "(vh) 0, (-elh) ".concat(v)
|
||||
};
|
||||
},
|
||||
eager: function eager() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;
|
||||
return {
|
||||
"data-lax-translate-y": "(vh) 0, (-elh) -".concat(v)
|
||||
};
|
||||
},
|
||||
slalom: function slalom() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 50;
|
||||
return {
|
||||
"data-lax-translate-x": "vh ".concat(v, ", (vh*0.8) ").concat(-v, ", (vh*0.6) ").concat(v, ", (vh*0.4) ").concat(-v, ", (vh*0.2) ").concat(v, ", (vh*0) ").concat(-v, ", (-elh) ").concat(v)
|
||||
};
|
||||
},
|
||||
crazy: function crazy(v) {
|
||||
return {
|
||||
"data-lax-hue-rotate": _crazy
|
||||
};
|
||||
},
|
||||
spin: function spin() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 360;
|
||||
return {
|
||||
"data-lax-rotate": "(vh) 0, (-elh) ".concat(v)
|
||||
};
|
||||
},
|
||||
spinRev: function spinRev() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 360;
|
||||
return {
|
||||
"data-lax-rotate": "(vh) 0, (-elh) ".concat(-v)
|
||||
};
|
||||
},
|
||||
spinIn: function spinIn() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 360;
|
||||
return {
|
||||
"data-lax-rotate": "vh ".concat(v, ", (vh*0.5) 0")
|
||||
};
|
||||
},
|
||||
spinOut: function spinOut() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 360;
|
||||
return {
|
||||
"data-lax-rotate": "(vh*0.5) 0, -elh ".concat(v)
|
||||
};
|
||||
},
|
||||
blurInOut: function blurInOut() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 40;
|
||||
return {
|
||||
"data-lax-blur": "(vh) ".concat(v, ", (vh*0.8) 0, (vh*0.2) 0, 0 ").concat(v)
|
||||
};
|
||||
},
|
||||
blurIn: function blurIn() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 40;
|
||||
return {
|
||||
"data-lax-blur": "(vh) ".concat(v, ", (vh*0.7) 0")
|
||||
};
|
||||
},
|
||||
blurOut: function blurOut() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 40;
|
||||
return {
|
||||
"data-lax-blur": "(vh*0.3) 0, 0 ".concat(v)
|
||||
};
|
||||
},
|
||||
fadeInOut: function fadeInOut() {
|
||||
return {
|
||||
"data-lax-opacity": "(vh) 0, (vh*0.8) 1, (vh*0.2) 1, 0 0"
|
||||
};
|
||||
},
|
||||
fadeIn: function fadeIn() {
|
||||
return {
|
||||
"data-lax-opacity": "(vh) 0, (vh*0.7) 1"
|
||||
};
|
||||
},
|
||||
fadeOut: function fadeOut() {
|
||||
return {
|
||||
"data-lax-opacity": "(vh*0.3) 1, 0 0"
|
||||
};
|
||||
},
|
||||
driftLeft: function driftLeft() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;
|
||||
return {
|
||||
"data-lax-translate-x": "vh ".concat(v, ", -elh ").concat(-v)
|
||||
};
|
||||
},
|
||||
driftRight: function driftRight() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;
|
||||
return {
|
||||
"data-lax-translate-x": "vh ".concat(-v, ", -elh ").concat(v)
|
||||
};
|
||||
},
|
||||
leftToRight: function leftToRight() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
|
||||
return {
|
||||
"data-lax-translate-x": "vh 0, -elh (vw*".concat(v, ")")
|
||||
};
|
||||
},
|
||||
rightToLeft: function rightToLeft() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
|
||||
return {
|
||||
"data-lax-translate-x": "vh 0, -elh (vw*".concat(-v, ")")
|
||||
};
|
||||
},
|
||||
zoomInOut: function zoomInOut() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0.2;
|
||||
return {
|
||||
"data-lax-scale": "(vh) ".concat(v, ", (vh*0.8) 1, (vh*0.2) 1, -elh ").concat(v)
|
||||
};
|
||||
},
|
||||
zoomIn: function zoomIn() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0.2;
|
||||
return {
|
||||
"data-lax-scale": "(vh) ".concat(v, ", (vh*0.7) 1")
|
||||
};
|
||||
},
|
||||
zoomOut: function zoomOut() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0.2;
|
||||
return {
|
||||
"data-lax-scale": "(vh*0.3) 1, -elh ".concat(v)
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
lax.addPreset = function (name, o) {
|
||||
lax.presets[name] = o;
|
||||
};
|
||||
|
||||
function intrp(table, v) {
|
||||
var i = 0;
|
||||
|
||||
while (table[i][0] <= v && table[i + 1] !== undefined) {
|
||||
i += 1;
|
||||
for (var i = 0; i < 100; i++) {
|
||||
_crazy += " " + window.innerHeight * (i / 100) + " " + Math.random() * 360 + ", ";
|
||||
}
|
||||
|
||||
var x = table[i][0];
|
||||
var prevX = table[i - 1] === undefined ? x : table[i - 1][0];
|
||||
var y = table[i][1];
|
||||
var prevY = table[i - 1] === undefined ? y : table[i - 1][1];
|
||||
var xPoint = Math.min(Math.max((v - prevX) / (x - prevX), 0), 1);
|
||||
var yPoint = xPoint * (y - prevY) + prevY;
|
||||
return yPoint;
|
||||
}
|
||||
lax.presets = {
|
||||
linger: function linger(v) {
|
||||
return {
|
||||
"data-lax-translate-y": "(vh*0.7) 0, 0 200, -500 0"
|
||||
};
|
||||
},
|
||||
lazy: function lazy() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;
|
||||
return {
|
||||
"data-lax-translate-y": "(vh) 0, (-elh) ".concat(v)
|
||||
};
|
||||
},
|
||||
eager: function eager() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;
|
||||
return {
|
||||
"data-lax-translate-y": "(vh) 0, (-elh) -".concat(v)
|
||||
};
|
||||
},
|
||||
slalom: function slalom() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 50;
|
||||
return {
|
||||
"data-lax-translate-x": "vh ".concat(v, ", (vh*0.8) ").concat(-v, ", (vh*0.6) ").concat(v, ", (vh*0.4) ").concat(-v, ", (vh*0.2) ").concat(v, ", (vh*0) ").concat(-v, ", (-elh) ").concat(v)
|
||||
};
|
||||
},
|
||||
crazy: function crazy(v) {
|
||||
return {
|
||||
"data-lax-hue-rotate": _crazy
|
||||
};
|
||||
},
|
||||
spin: function spin() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 360;
|
||||
return {
|
||||
"data-lax-rotate": "(vh) 0, (-elh) ".concat(v)
|
||||
};
|
||||
},
|
||||
spinRev: function spinRev() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 360;
|
||||
return {
|
||||
"data-lax-rotate": "(vh) 0, (-elh) ".concat(-v)
|
||||
};
|
||||
},
|
||||
spinIn: function spinIn() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 360;
|
||||
return {
|
||||
"data-lax-rotate": "vh ".concat(v, ", (vh*0.5) 0")
|
||||
};
|
||||
},
|
||||
spinOut: function spinOut() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 360;
|
||||
return {
|
||||
"data-lax-rotate": "(vh*0.5) 0, -elh ".concat(v)
|
||||
};
|
||||
},
|
||||
blurInOut: function blurInOut() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 40;
|
||||
return {
|
||||
"data-lax-blur": "(vh) ".concat(v, ", (vh*0.8) 0, (vh*0.2) 0, 0 ").concat(v)
|
||||
};
|
||||
},
|
||||
blurIn: function blurIn() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 40;
|
||||
return {
|
||||
"data-lax-blur": "(vh) ".concat(v, ", (vh*0.7) 0")
|
||||
};
|
||||
},
|
||||
blurOut: function blurOut() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 40;
|
||||
return {
|
||||
"data-lax-blur": "(vh*0.3) 0, 0 ".concat(v)
|
||||
};
|
||||
},
|
||||
fadeInOut: function fadeInOut() {
|
||||
return {
|
||||
"data-lax-opacity": "(vh) 0, (vh*0.8) 1, (vh*0.2) 1, 0 0"
|
||||
};
|
||||
},
|
||||
fadeIn: function fadeIn() {
|
||||
return {
|
||||
"data-lax-opacity": "(vh) 0, (vh*0.7) 1"
|
||||
};
|
||||
},
|
||||
fadeOut: function fadeOut() {
|
||||
return {
|
||||
"data-lax-opacity": "(vh*0.3) 1, 0 0"
|
||||
};
|
||||
},
|
||||
driftLeft: function driftLeft() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;
|
||||
return {
|
||||
"data-lax-translate-x": "vh ".concat(v, ", -elh ").concat(-v)
|
||||
};
|
||||
},
|
||||
driftRight: function driftRight() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 100;
|
||||
return {
|
||||
"data-lax-translate-x": "vh ".concat(-v, ", -elh ").concat(v)
|
||||
};
|
||||
},
|
||||
leftToRight: function leftToRight() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
|
||||
return {
|
||||
"data-lax-translate-x": "vh 0, -elh (vw*".concat(v, ")")
|
||||
};
|
||||
},
|
||||
rightToLeft: function rightToLeft() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 1;
|
||||
return {
|
||||
"data-lax-translate-x": "vh 0, -elh (vw*".concat(-v, ")")
|
||||
};
|
||||
},
|
||||
zoomInOut: function zoomInOut() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0.2;
|
||||
return {
|
||||
"data-lax-scale": "(vh) ".concat(v, ", (vh*0.8) 1, (vh*0.2) 1, -elh ").concat(v)
|
||||
};
|
||||
},
|
||||
zoomIn: function zoomIn() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0.2;
|
||||
return {
|
||||
"data-lax-scale": "(vh) ".concat(v, ", (vh*0.7) 1")
|
||||
};
|
||||
},
|
||||
zoomOut: function zoomOut() {
|
||||
var v = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 0.2;
|
||||
return {
|
||||
"data-lax-scale": "(vh*0.3) 1, -elh ".concat(v)
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
lax.setup = function (o) {
|
||||
lax.populateParallaxObjects();
|
||||
};
|
||||
lax.addPreset = function (name, o) {
|
||||
lax.presets[name] = o;
|
||||
};
|
||||
|
||||
lax.populateParallaxObjects = function () {
|
||||
var selector = Object.keys(transforms).map(function (t) {
|
||||
return "[".concat(t, "]");
|
||||
}).join(",");
|
||||
selector += ",[data-lax-preset]";
|
||||
document.querySelectorAll(selector).forEach(function (el) {
|
||||
var o = {
|
||||
el: el,
|
||||
transforms: []
|
||||
};
|
||||
var presetNames = el.attributes["data-lax-preset"] && el.attributes["data-lax-preset"].value;
|
||||
function intrp(table, v) {
|
||||
var i = 0;
|
||||
|
||||
if (presetNames) {
|
||||
presetNames.split(" ").forEach(function (p) {
|
||||
var bits = p.split("-");
|
||||
var fn = lax.presets[bits[0]];
|
||||
while (table[i][0] <= v && table[i + 1] !== undefined) {
|
||||
i += 1;
|
||||
}
|
||||
|
||||
if (!fn) {
|
||||
console.error("preset #{bits[0]} is not defined");
|
||||
} else {
|
||||
var d = fn(bits[1]);
|
||||
var x = table[i][0];
|
||||
var prevX = table[i - 1] === undefined ? x : table[i - 1][0];
|
||||
var y = table[i][1];
|
||||
var prevY = table[i - 1] === undefined ? y : table[i - 1][1];
|
||||
var xPoint = Math.min(Math.max((v - prevX) / (x - prevX), 0), 1);
|
||||
var yPoint = xPoint * (y - prevY) + prevY;
|
||||
return yPoint;
|
||||
}
|
||||
|
||||
for (var k in d) {
|
||||
el.setAttribute(k, d[k]);
|
||||
lax.setup = function (o) {
|
||||
lax.populateObjects();
|
||||
};
|
||||
|
||||
lax.populateObjects = function () {
|
||||
var selector = Object.keys(transforms).map(function (t) {
|
||||
return "[".concat(t, "]");
|
||||
}).join(",");
|
||||
selector += ",[data-lax-preset]";
|
||||
document.querySelectorAll(selector).forEach(function (el) {
|
||||
var o = {
|
||||
el: el,
|
||||
transforms: []
|
||||
};
|
||||
var presetNames = el.attributes["data-lax-preset"] && el.attributes["data-lax-preset"].value;
|
||||
|
||||
if (presetNames) {
|
||||
presetNames.split(" ").forEach(function (p) {
|
||||
var bits = p.split("-");
|
||||
var fn = lax.presets[bits[0]];
|
||||
|
||||
if (!fn) {
|
||||
console.error("preset #{bits[0]} is not defined");
|
||||
} else {
|
||||
var d = fn(bits[1]);
|
||||
|
||||
for (var k in d) {
|
||||
el.setAttribute(k, d[k]);
|
||||
}
|
||||
}
|
||||
});
|
||||
el.setAttribute("data-lax-anchor", "self");
|
||||
el.attributes.removeNamedItem("data-lax-preset");
|
||||
}
|
||||
|
||||
var optimise = !(el.attributes["data-lax-optimize"] && el.attributes["data-lax-optimize"].value == 'false');
|
||||
if (optimise) el.style["-webkit-backface-visibility"] = "hidden";
|
||||
if (el.attributes["data-lax-optimize"]) el.attributes.removeNamedItem("data-lax-optimize");
|
||||
|
||||
for (var i = 0; i < el.attributes.length; i++) {
|
||||
var a = el.attributes[i];
|
||||
var bits = a.name.split("-");
|
||||
|
||||
if (bits[1] === "lax") {
|
||||
if (a.name === "data-lax-anchor") {
|
||||
o["data-lax-anchor"] = a.value === "self" ? el : document.querySelector(a.value);
|
||||
var rect = o["data-lax-anchor"].getBoundingClientRect();
|
||||
o["data-lax-anchor-top"] = Math.floor(rect.top) + window.scrollY;
|
||||
} else {
|
||||
o.transforms[a.name] = a.value.replace(new RegExp('vw', 'g'), window.innerWidth).replace(new RegExp('vh', 'g'), window.innerHeight).replace(new RegExp('elh', 'g'), el.clientHeight).replace(new RegExp('elw', 'g'), el.clientWidth).replace(new RegExp('-vw', 'g'), -window.innerWidth).replace(new RegExp('-vh', 'g'), -window.innerHeight).replace(new RegExp('-elh', 'g'), -el.clientHeight).replace(new RegExp('-elw', 'g'), -el.clientWidth).replace(/\s+/g, " ").split(",").map(function (x) {
|
||||
return x.trim().split(" ").map(function (y) {
|
||||
if (y[0] === "(") return eval(y);else return parseFloat(y);
|
||||
});
|
||||
}).sort(function (a, b) {
|
||||
return a[0] - b[0];
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
el.setAttribute("data-lax-anchor", "self");
|
||||
el.attributes.removeNamedItem("data-lax-preset");
|
||||
}
|
||||
}
|
||||
|
||||
var optimise = !(el.attributes["data-lax-optimize"] && el.attributes["data-lax-optimize"].value == 'false');
|
||||
if (optimise) el.style["-webkit-backface-visibility"] = "hidden";
|
||||
if (el.attributes["data-lax-optimize"]) el.attributes.removeNamedItem("data-lax-optimize");
|
||||
lax.elements.push(o);
|
||||
});
|
||||
};
|
||||
|
||||
for (var i = 0; i < el.attributes.length; i++) {
|
||||
var a = el.attributes[i];
|
||||
var bits = a.name.split("-");
|
||||
var lastScroll = 0;
|
||||
|
||||
if (bits[1] === "lax") {
|
||||
if (a.name === "data-lax-anchor") {
|
||||
o["data-lax-anchor"] = a.value === "self" ? el : document.querySelector(a.value);
|
||||
var rect = o["data-lax-anchor"].getBoundingClientRect();
|
||||
o["data-lax-anchor-top"] = Math.floor(rect.top) + window.scrollY;
|
||||
lax.update = function (y) {
|
||||
var momentum = lastScroll - y;
|
||||
lastScroll = y;
|
||||
lax.elements.forEach(function (o) {
|
||||
var transformString = "";
|
||||
var r = o["data-lax-anchor-top"] ? o["data-lax-anchor-top"] - y : y;
|
||||
var style = {
|
||||
transform: "",
|
||||
filter: ""
|
||||
};
|
||||
|
||||
for (var i in o.transforms) {
|
||||
var arr = o.transforms[i];
|
||||
var t = transforms[i];
|
||||
var v = intrp(arr, r);
|
||||
|
||||
if (!t) {
|
||||
console.error("lax: " + i + " is not supported");
|
||||
return;
|
||||
}
|
||||
|
||||
t(style, v);
|
||||
}
|
||||
|
||||
for (var k in style) {
|
||||
if (style.opacity === 0) {
|
||||
// if opacity 0 don't update
|
||||
o.el.style.opacity = 0;
|
||||
} else {
|
||||
o.transforms[a.name] = a.value.replace(new RegExp('vw', 'g'), window.innerWidth).replace(new RegExp('vh', 'g'), window.innerHeight).replace(new RegExp('elh', 'g'), el.clientHeight).replace(new RegExp('elw', 'g'), el.clientWidth).replace(new RegExp('-vw', 'g'), -window.innerWidth).replace(new RegExp('-vh', 'g'), -window.innerHeight).replace(new RegExp('-elh', 'g'), -el.clientHeight).replace(new RegExp('-elw', 'g'), -el.clientWidth).replace(/\s+/g, " ").split(",").map(function (x) {
|
||||
return x.trim().split(" ").map(function (y) {
|
||||
if (y[0] === "(") return eval(y);else return parseFloat(y);
|
||||
});
|
||||
}).sort(function (a, b) {
|
||||
return a[0] - b[0];
|
||||
});
|
||||
o.el.style[k] = style[k];
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
parallaxObjects.push(o);
|
||||
});
|
||||
};
|
||||
return lax;
|
||||
}();
|
||||
|
||||
var lastScroll = 0;
|
||||
|
||||
lax.update = function (y) {
|
||||
var momentum = lastScroll - y;
|
||||
lastScroll = y;
|
||||
parallaxObjects.forEach(function (o) {
|
||||
var transformString = "";
|
||||
var r = o["data-lax-anchor-top"] ? o["data-lax-anchor-top"] - y : y;
|
||||
var style = {
|
||||
transform: "",
|
||||
filter: ""
|
||||
};
|
||||
|
||||
for (var i in o.transforms) {
|
||||
var arr = o.transforms[i];
|
||||
var t = transforms[i];
|
||||
var v = intrp(arr, r);
|
||||
|
||||
if (!t) {
|
||||
console.error("lax: " + i + " is not supported");
|
||||
return;
|
||||
}
|
||||
|
||||
t(style, v);
|
||||
}
|
||||
|
||||
for (var k in style) {
|
||||
if (style.opacity === 0) {
|
||||
// if opacity 0 don't update
|
||||
o.el.style.opacity = 0;
|
||||
} else {
|
||||
o.el.style[k] = style[k];
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined') module.exports = lax;else window.lax = lax;
|
||||
})();
|
||||
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.
23
package.json
23
package.json
@@ -1,12 +1,29 @@
|
||||
{
|
||||
"name": "lax.js",
|
||||
"version": "1.0.0",
|
||||
"version": "1.0.2",
|
||||
"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"
|
||||
},
|
||||
"dependencies": {
|
||||
"devDependencies": {
|
||||
"@babel/cli": "^7.2.3",
|
||||
"@babel/core": "^7.3.4",
|
||||
"@babel/preset-env": "^7.3.4"
|
||||
}
|
||||
},
|
||||
"description": "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!",
|
||||
"license": "MIT",
|
||||
"author": "alexfoxy@gmail.com",
|
||||
"repository": {
|
||||
"type" : "git",
|
||||
"url" : "https://github.com/alexfoxy/laxxx"
|
||||
},
|
||||
"main": "lib/lax.min.js",
|
||||
"keywords": [
|
||||
"javascript",
|
||||
"parallax",
|
||||
"scroll",
|
||||
"animation",
|
||||
"effects",
|
||||
"css",
|
||||
"html"
|
||||
]
|
||||
}
|
||||
|
||||
461
src/lax.js
461
src/lax.js
@@ -14,238 +14,245 @@
|
||||
//
|
||||
|
||||
(function() {
|
||||
var lax = {}
|
||||
window.lax = lax
|
||||
|
||||
var parallaxObjects = []
|
||||
|
||||
const transforms = {
|
||||
"data-lax-opacity": function(style, v) { style.opacity = v },
|
||||
"data-lax-translate": function(style, v) { style.transform += ` translate(${v}px, ${v}px)` },
|
||||
"data-lax-translate-x": function(style, v) { style.transform += ` translateX(${v}px)` },
|
||||
"data-lax-translate-y": function(style, v) { style.transform += ` translateY(${v}px)` },
|
||||
"data-lax-scale": function(style, v) { style.transform += ` scale(${v})` },
|
||||
"data-lax-scale-x": function(style, v) { style.transform += ` scaleX(${v})` },
|
||||
"data-lax-scale-y": function(style, v) { style.transform += ` scaleY(${v})` },
|
||||
"data-lax-skew": function(style, v) { style.transform += ` skew(${v}deg, ${v}deg)` },
|
||||
"data-lax-skew-x": function(style, v) { style.transform += ` skewX(${v}deg)` },
|
||||
"data-lax-skew-y": function(style, v) { style.transform += ` skewY(${v}deg)` },
|
||||
"data-lax-rotate": function(style, v) { style.transform += ` rotate(${v}deg)` },
|
||||
|
||||
"data-lax-brightness": function(style, v) { style.filter += ` brightness(${v}%)` },
|
||||
"data-lax-contrast": function(style, v) { style.filter += ` contrast(${v}%)` },
|
||||
"data-lax-hue-rotate": function(style, v) { style.filter += ` hue-rotate(${v}deg)` },
|
||||
"data-lax-blur": function(style, v) { style.filter += ` blur(${v}px)` },
|
||||
"data-lax-invert": function(style, v) { style.filter += ` invert(${v}%)` },
|
||||
"data-lax-saturate": function(style, v) { style.filter += ` saturate(${v}%)` },
|
||||
"data-lax-grayscale": function(style, v) { style.filter += ` grayscale(${v}%)` },
|
||||
}
|
||||
|
||||
let crazy = ""
|
||||
|
||||
for(var i=0;i<100;i++) {
|
||||
crazy += " " + (window.innerHeight*(i/100)) + " " + (Math.random() * 360) + ", "
|
||||
}
|
||||
|
||||
lax.presets = {
|
||||
linger: (v) => {
|
||||
return { "data-lax-translate-y": `(vh*0.7) 0, 0 200, -500 0` }
|
||||
},
|
||||
lazy: (v=100) => {
|
||||
return { "data-lax-translate-y": `(vh) 0, (-elh) ${v}` }
|
||||
},
|
||||
eager: (v=100) => {
|
||||
return { "data-lax-translate-y": `(vh) 0, (-elh) -${v}` }
|
||||
},
|
||||
slalom: (v=50) => {
|
||||
return { "data-lax-translate-x": `vh ${v}, (vh*0.8) ${-v}, (vh*0.6) ${v}, (vh*0.4) ${-v}, (vh*0.2) ${v}, (vh*0) ${-v}, (-elh) ${v}` }
|
||||
},
|
||||
crazy: (v) => {
|
||||
return { "data-lax-hue-rotate": crazy }
|
||||
},
|
||||
spin: (v=360) => {
|
||||
return { "data-lax-rotate": `(vh) 0, (-elh) ${v}` }
|
||||
},
|
||||
spinRev: (v=360) => {
|
||||
return { "data-lax-rotate": `(vh) 0, (-elh) ${-v}` }
|
||||
},
|
||||
spinIn: (v=360) => {
|
||||
return { "data-lax-rotate": `vh ${v}, (vh*0.5) 0` }
|
||||
},
|
||||
spinOut: (v=360) => {
|
||||
return { "data-lax-rotate": `(vh*0.5) 0, -elh ${v}` }
|
||||
},
|
||||
blurInOut: (v=40) => {
|
||||
return { "data-lax-blur": `(vh) ${v}, (vh*0.8) 0, (vh*0.2) 0, 0 ${v}` }
|
||||
},
|
||||
blurIn: (v=40) => {
|
||||
return { "data-lax-blur": `(vh) ${v}, (vh*0.7) 0` }
|
||||
},
|
||||
blurOut: (v=40) => {
|
||||
return { "data-lax-blur": `(vh*0.3) 0, 0 ${v}` }
|
||||
},
|
||||
fadeInOut: () => {
|
||||
return { "data-lax-opacity": "(vh) 0, (vh*0.8) 1, (vh*0.2) 1, 0 0" }
|
||||
},
|
||||
fadeIn: () => {
|
||||
return { "data-lax-opacity": "(vh) 0, (vh*0.7) 1" }
|
||||
},
|
||||
fadeOut: () => {
|
||||
return { "data-lax-opacity": "(vh*0.3) 1, 0 0" }
|
||||
},
|
||||
driftLeft: (v=100) => {
|
||||
return { "data-lax-translate-x": `vh ${v}, -elh ${-v}` }
|
||||
},
|
||||
driftRight: (v=100) => {
|
||||
return { "data-lax-translate-x": `vh ${-v}, -elh ${v}` }
|
||||
},
|
||||
leftToRight: (v=1) => {
|
||||
return { "data-lax-translate-x": `vh 0, -elh (vw*${v})` }
|
||||
},
|
||||
rightToLeft: (v=1) => {
|
||||
return { "data-lax-translate-x": `vh 0, -elh (vw*${-v})` }
|
||||
},
|
||||
zoomInOut: (v=0.2) => {
|
||||
return { "data-lax-scale": `(vh) ${v}, (vh*0.8) 1, (vh*0.2) 1, -elh ${v}` }
|
||||
},
|
||||
zoomIn: (v=0.2) => {
|
||||
return { "data-lax-scale": `(vh) ${v}, (vh*0.7) 1` }
|
||||
},
|
||||
zoomOut: (v=0.2) => {
|
||||
return { "data-lax-scale": `(vh*0.3) 1, -elh ${v}` }
|
||||
},
|
||||
}
|
||||
|
||||
lax.addPreset = (name, o) => {
|
||||
lax.presets[name] = o
|
||||
}
|
||||
|
||||
function intrp(table, v) {
|
||||
var i = 0
|
||||
|
||||
while(table[i][0] <= v && table[i+1] !== undefined) {
|
||||
i+=1
|
||||
}
|
||||
|
||||
var x = table[i][0]
|
||||
var prevX = table[i-1] === undefined ? x : table[i-1][0]
|
||||
|
||||
var y = table[i][1]
|
||||
var prevY = table[i-1] === undefined ? y : table[i-1][1]
|
||||
|
||||
var xPoint = Math.min(Math.max((v-prevX)/(x-prevX),0),1)
|
||||
var yPoint = (xPoint*(y-prevY)) + prevY
|
||||
|
||||
return yPoint
|
||||
}
|
||||
|
||||
lax.setup = function(o) {
|
||||
lax.populateParallaxObjects()
|
||||
}
|
||||
|
||||
lax.populateParallaxObjects = function() {
|
||||
var selector = Object.keys(transforms).map(t => `[${t}]`).join(",")
|
||||
selector += ",[data-lax-preset]"
|
||||
|
||||
document.querySelectorAll(selector).forEach(function(el) {
|
||||
var o = {
|
||||
el: el,
|
||||
transforms: []
|
||||
var lax = (function() {
|
||||
var lax = {
|
||||
elements: []
|
||||
}
|
||||
|
||||
var presetNames = el.attributes["data-lax-preset"] && el.attributes["data-lax-preset"].value
|
||||
if(presetNames) {
|
||||
presetNames.split(" ").forEach((p) => {
|
||||
const bits = p.split("-")
|
||||
const fn = lax.presets[bits[0]]
|
||||
if(!fn) {
|
||||
console.error(`preset #{bits[0]} is not defined`)
|
||||
} else {
|
||||
const d = fn(bits[1])
|
||||
for(var k in d) {
|
||||
el.setAttribute(k, d[k])
|
||||
const transforms = {
|
||||
"data-lax-opacity": function(style, v) { style.opacity = v },
|
||||
"data-lax-translate": function(style, v) { style.transform += ` translate(${v}px, ${v}px)` },
|
||||
"data-lax-translate-x": function(style, v) { style.transform += ` translateX(${v}px)` },
|
||||
"data-lax-translate-y": function(style, v) { style.transform += ` translateY(${v}px)` },
|
||||
"data-lax-scale": function(style, v) { style.transform += ` scale(${v})` },
|
||||
"data-lax-scale-x": function(style, v) { style.transform += ` scaleX(${v})` },
|
||||
"data-lax-scale-y": function(style, v) { style.transform += ` scaleY(${v})` },
|
||||
"data-lax-skew": function(style, v) { style.transform += ` skew(${v}deg, ${v}deg)` },
|
||||
"data-lax-skew-x": function(style, v) { style.transform += ` skewX(${v}deg)` },
|
||||
"data-lax-skew-y": function(style, v) { style.transform += ` skewY(${v}deg)` },
|
||||
"data-lax-rotate": function(style, v) { style.transform += ` rotate(${v}deg)` },
|
||||
|
||||
"data-lax-brightness": function(style, v) { style.filter += ` brightness(${v}%)` },
|
||||
"data-lax-contrast": function(style, v) { style.filter += ` contrast(${v}%)` },
|
||||
"data-lax-hue-rotate": function(style, v) { style.filter += ` hue-rotate(${v}deg)` },
|
||||
"data-lax-blur": function(style, v) { style.filter += ` blur(${v}px)` },
|
||||
"data-lax-invert": function(style, v) { style.filter += ` invert(${v}%)` },
|
||||
"data-lax-saturate": function(style, v) { style.filter += ` saturate(${v}%)` },
|
||||
"data-lax-grayscale": function(style, v) { style.filter += ` grayscale(${v}%)` },
|
||||
}
|
||||
|
||||
let crazy = ""
|
||||
|
||||
for(var i=0;i<100;i++) {
|
||||
crazy += " " + (window.innerHeight*(i/100)) + " " + (Math.random() * 360) + ", "
|
||||
}
|
||||
|
||||
lax.presets = {
|
||||
linger: (v) => {
|
||||
return { "data-lax-translate-y": `(vh*0.7) 0, 0 200, -500 0` }
|
||||
},
|
||||
lazy: (v=100) => {
|
||||
return { "data-lax-translate-y": `(vh) 0, (-elh) ${v}` }
|
||||
},
|
||||
eager: (v=100) => {
|
||||
return { "data-lax-translate-y": `(vh) 0, (-elh) -${v}` }
|
||||
},
|
||||
slalom: (v=50) => {
|
||||
return { "data-lax-translate-x": `vh ${v}, (vh*0.8) ${-v}, (vh*0.6) ${v}, (vh*0.4) ${-v}, (vh*0.2) ${v}, (vh*0) ${-v}, (-elh) ${v}` }
|
||||
},
|
||||
crazy: (v) => {
|
||||
return { "data-lax-hue-rotate": crazy }
|
||||
},
|
||||
spin: (v=360) => {
|
||||
return { "data-lax-rotate": `(vh) 0, (-elh) ${v}` }
|
||||
},
|
||||
spinRev: (v=360) => {
|
||||
return { "data-lax-rotate": `(vh) 0, (-elh) ${-v}` }
|
||||
},
|
||||
spinIn: (v=360) => {
|
||||
return { "data-lax-rotate": `vh ${v}, (vh*0.5) 0` }
|
||||
},
|
||||
spinOut: (v=360) => {
|
||||
return { "data-lax-rotate": `(vh*0.5) 0, -elh ${v}` }
|
||||
},
|
||||
blurInOut: (v=40) => {
|
||||
return { "data-lax-blur": `(vh) ${v}, (vh*0.8) 0, (vh*0.2) 0, 0 ${v}` }
|
||||
},
|
||||
blurIn: (v=40) => {
|
||||
return { "data-lax-blur": `(vh) ${v}, (vh*0.7) 0` }
|
||||
},
|
||||
blurOut: (v=40) => {
|
||||
return { "data-lax-blur": `(vh*0.3) 0, 0 ${v}` }
|
||||
},
|
||||
fadeInOut: () => {
|
||||
return { "data-lax-opacity": "(vh) 0, (vh*0.8) 1, (vh*0.2) 1, 0 0" }
|
||||
},
|
||||
fadeIn: () => {
|
||||
return { "data-lax-opacity": "(vh) 0, (vh*0.7) 1" }
|
||||
},
|
||||
fadeOut: () => {
|
||||
return { "data-lax-opacity": "(vh*0.3) 1, 0 0" }
|
||||
},
|
||||
driftLeft: (v=100) => {
|
||||
return { "data-lax-translate-x": `vh ${v}, -elh ${-v}` }
|
||||
},
|
||||
driftRight: (v=100) => {
|
||||
return { "data-lax-translate-x": `vh ${-v}, -elh ${v}` }
|
||||
},
|
||||
leftToRight: (v=1) => {
|
||||
return { "data-lax-translate-x": `vh 0, -elh (vw*${v})` }
|
||||
},
|
||||
rightToLeft: (v=1) => {
|
||||
return { "data-lax-translate-x": `vh 0, -elh (vw*${-v})` }
|
||||
},
|
||||
zoomInOut: (v=0.2) => {
|
||||
return { "data-lax-scale": `(vh) ${v}, (vh*0.8) 1, (vh*0.2) 1, -elh ${v}` }
|
||||
},
|
||||
zoomIn: (v=0.2) => {
|
||||
return { "data-lax-scale": `(vh) ${v}, (vh*0.7) 1` }
|
||||
},
|
||||
zoomOut: (v=0.2) => {
|
||||
return { "data-lax-scale": `(vh*0.3) 1, -elh ${v}` }
|
||||
},
|
||||
}
|
||||
|
||||
lax.addPreset = (name, o) => {
|
||||
lax.presets[name] = o
|
||||
}
|
||||
|
||||
function intrp(table, v) {
|
||||
var i = 0
|
||||
|
||||
while(table[i][0] <= v && table[i+1] !== undefined) {
|
||||
i+=1
|
||||
}
|
||||
|
||||
var x = table[i][0]
|
||||
var prevX = table[i-1] === undefined ? x : table[i-1][0]
|
||||
|
||||
var y = table[i][1]
|
||||
var prevY = table[i-1] === undefined ? y : table[i-1][1]
|
||||
|
||||
var xPoint = Math.min(Math.max((v-prevX)/(x-prevX),0),1)
|
||||
var yPoint = (xPoint*(y-prevY)) + prevY
|
||||
|
||||
return yPoint
|
||||
}
|
||||
|
||||
lax.setup = function(o) {
|
||||
lax.populateObjects()
|
||||
}
|
||||
|
||||
lax.populateObjects = function() {
|
||||
var selector = Object.keys(transforms).map(t => `[${t}]`).join(",")
|
||||
selector += ",[data-lax-preset]"
|
||||
|
||||
document.querySelectorAll(selector).forEach(function(el) {
|
||||
var o = {
|
||||
el: el,
|
||||
transforms: []
|
||||
}
|
||||
|
||||
var presetNames = el.attributes["data-lax-preset"] && el.attributes["data-lax-preset"].value
|
||||
if(presetNames) {
|
||||
presetNames.split(" ").forEach((p) => {
|
||||
const bits = p.split("-")
|
||||
const fn = lax.presets[bits[0]]
|
||||
if(!fn) {
|
||||
console.error(`preset #{bits[0]} is not defined`)
|
||||
} else {
|
||||
const d = fn(bits[1])
|
||||
for(var k in d) {
|
||||
el.setAttribute(k, d[k])
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
el.setAttribute("data-lax-anchor", "self")
|
||||
el.attributes.removeNamedItem("data-lax-preset")
|
||||
}
|
||||
|
||||
const optimise = !(el.attributes["data-lax-optimize"] && el.attributes["data-lax-optimize"].value == 'false')
|
||||
if(optimise) el.style["-webkit-backface-visibility"] = "hidden"
|
||||
if(el.attributes["data-lax-optimize"]) el.attributes.removeNamedItem("data-lax-optimize")
|
||||
|
||||
for(var i=0; i<el.attributes.length; i++) {
|
||||
var a = el.attributes[i]
|
||||
var bits = a.name.split("-")
|
||||
if(bits[1] === "lax") {
|
||||
if(a.name === "data-lax-anchor") {
|
||||
o["data-lax-anchor"] = a.value === "self" ? el : document.querySelector(a.value)
|
||||
const rect = o["data-lax-anchor"].getBoundingClientRect()
|
||||
o["data-lax-anchor-top"] = Math.floor(rect.top) + window.scrollY
|
||||
} else {
|
||||
o.transforms[a.name] = a.value
|
||||
.replace(new RegExp('vw', 'g'), window.innerWidth)
|
||||
.replace(new RegExp('vh', 'g'), window.innerHeight)
|
||||
.replace(new RegExp('elh', 'g'), el.clientHeight)
|
||||
.replace(new RegExp('elw', 'g'), el.clientWidth)
|
||||
.replace(new RegExp('-vw', 'g'), -window.innerWidth)
|
||||
.replace(new RegExp('-vh', 'g'), -window.innerHeight)
|
||||
.replace(new RegExp('-elh', 'g'), -el.clientHeight)
|
||||
.replace(new RegExp('-elw', 'g'), -el.clientWidth).replace(/\s+/g," ")
|
||||
.split(",").map((x) => {
|
||||
return x.trim().split(" ").map(y => {
|
||||
if(y[0] === "(") return eval(y)
|
||||
else return parseFloat(y)
|
||||
})
|
||||
}).sort((a,b) => {
|
||||
return a[0] - b[0]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
lax.elements.push(o)
|
||||
})
|
||||
}
|
||||
|
||||
var lastScroll = 0
|
||||
|
||||
lax.update = function(y) {
|
||||
var momentum = lastScroll-y
|
||||
lastScroll = y
|
||||
|
||||
lax.elements.forEach(function(o) {
|
||||
var transformString = ""
|
||||
var r = o["data-lax-anchor-top"] ? o["data-lax-anchor-top"]-y : y
|
||||
|
||||
var style = {
|
||||
transform: "",
|
||||
filter: ""
|
||||
}
|
||||
|
||||
for(var i in o.transforms) {
|
||||
var arr = o.transforms[i]
|
||||
var t = transforms[i]
|
||||
var v = intrp(arr, r)
|
||||
|
||||
if(!t) {
|
||||
console.error("lax: " + i + " is not supported")
|
||||
return
|
||||
}
|
||||
|
||||
t(style, v)
|
||||
}
|
||||
|
||||
for(let k in style) {
|
||||
if(style.opacity === 0) { // if opacity 0 don't update
|
||||
o.el.style.opacity = 0
|
||||
} else {
|
||||
o.el.style[k] = style[k]
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
el.setAttribute("data-lax-anchor", "self")
|
||||
el.attributes.removeNamedItem("data-lax-preset")
|
||||
}
|
||||
|
||||
const optimise = !(el.attributes["data-lax-optimize"] && el.attributes["data-lax-optimize"].value == 'false')
|
||||
if(optimise) el.style["-webkit-backface-visibility"] = "hidden"
|
||||
if(el.attributes["data-lax-optimize"]) el.attributes.removeNamedItem("data-lax-optimize")
|
||||
return lax;
|
||||
})();
|
||||
|
||||
for(var i=0; i<el.attributes.length; i++) {
|
||||
var a = el.attributes[i]
|
||||
var bits = a.name.split("-")
|
||||
if(bits[1] === "lax") {
|
||||
if(a.name === "data-lax-anchor") {
|
||||
o["data-lax-anchor"] = a.value === "self" ? el : document.querySelector(a.value)
|
||||
const rect = o["data-lax-anchor"].getBoundingClientRect()
|
||||
o["data-lax-anchor-top"] = Math.floor(rect.top) + window.scrollY
|
||||
} else {
|
||||
o.transforms[a.name] = a.value
|
||||
.replace(new RegExp('vw', 'g'), window.innerWidth)
|
||||
.replace(new RegExp('vh', 'g'), window.innerHeight)
|
||||
.replace(new RegExp('elh', 'g'), el.clientHeight)
|
||||
.replace(new RegExp('elw', 'g'), el.clientWidth)
|
||||
.replace(new RegExp('-vw', 'g'), -window.innerWidth)
|
||||
.replace(new RegExp('-vh', 'g'), -window.innerHeight)
|
||||
.replace(new RegExp('-elh', 'g'), -el.clientHeight)
|
||||
.replace(new RegExp('-elw', 'g'), -el.clientWidth).replace(/\s+/g," ")
|
||||
.split(",").map((x) => {
|
||||
return x.trim().split(" ").map(y => {
|
||||
if(y[0] === "(") return eval(y)
|
||||
else return parseFloat(y)
|
||||
})
|
||||
}).sort((a,b) => {
|
||||
return a[0] - b[0]
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
parallaxObjects.push(o)
|
||||
})
|
||||
}
|
||||
|
||||
var lastScroll = 0
|
||||
|
||||
lax.update = function(y) {
|
||||
var momentum = lastScroll-y
|
||||
lastScroll = y
|
||||
|
||||
parallaxObjects.forEach(function(o) {
|
||||
var transformString = ""
|
||||
var r = o["data-lax-anchor-top"] ? o["data-lax-anchor-top"]-y : y
|
||||
|
||||
var style = {
|
||||
transform: "",
|
||||
filter: ""
|
||||
}
|
||||
|
||||
for(var i in o.transforms) {
|
||||
var arr = o.transforms[i]
|
||||
var t = transforms[i]
|
||||
var v = intrp(arr, r)
|
||||
|
||||
if(!t) {
|
||||
console.error("lax: " + i + " is not supported")
|
||||
return
|
||||
}
|
||||
|
||||
t(style, v)
|
||||
}
|
||||
|
||||
for(let k in style) {
|
||||
if(style.opacity === 0) { // if opacity 0 don't update
|
||||
o.el.style.opacity = 0
|
||||
} else {
|
||||
o.el.style[k] = style[k]
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
})()
|
||||
if (typeof module !== 'undefined' && typeof module.exports !== 'undefined')
|
||||
module.exports = lax;
|
||||
else
|
||||
window.lax = lax;
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user