Skip to content

Commit

Permalink
renamed from laxxx to lax and added data- prefix to html tags to keep…
Browse files Browse the repository at this point in the history 
… html5 valid
  • Loading branch information
@alexfoxy
alexfoxy committed Mar 15, 2019
1 parent 2e87d7f commit 2cec7fe
Show file tree
Hide file tree
Showing 12 changed files with 410 additions and 411 deletions.
74 changes: 37 additions & 37 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,60 @@
# laxxx.js
# 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!

[>>> DEMO <<<](https://alexfox.dev/laxxx/)
[>>> DEMO <<<](https://alexfox.dev/lax/)


## Getting started

1) Add laxxx.js to your html
1) Add lax.js to your html

```html
<script src="lib/laxxx.min.js" >
<script src="lib/lax.min.js" >
```
2) Initialize the plugin
```javascript
window.onload = function() {
laxxx.setup({ /* opts */ }) // init
lax.setup({ /* opts */ }) // init
document.addEventListener('scroll', function(e) {
laxxx.update(window.scrollY) // update every scroll
lax.update(window.scrollY) // update every scroll
}, false)
laxxx.update(window.scrollY) // set initial positions
lax.update(window.scrollY) // set initial positions
}
```
3) Add attributes to the HTML tags you want to animate e.g.
```html
<p laxxx-preset="spin fadeInOut">Look at me goooooo!</p>
<p data-lax-preset="spin fadeInOut">Look at me goooooo!</p>
```
4) Scroll and enjoy!
## Presets
The easiest way to get started is to use the presets via the `laxxx-preset` attribute. You can chain multiple presetes together for e.g. `laxxx-preset="blurOut fadeOut spin"`. Some presets also support an optional strength e.g. `laxxx-preset="blurOut-50"`
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"`
See the list of [Supported Presets](#supported-presets) for details.
## Custom Animations
You can easily create your own effects. Just add an attribute to your HTML tag (see [Supported Attribute Keys](#supported-attribute-keys)) with an array of values. These arrays take the format of `scrollPos val, scrollPos val, ...` e.g:
```html
<p laxxx-opacity="0 1, 100 1, 200 0">
<p data-lax-opacity="0 1, 100 1, 200 0">
I start to fade out after the window scrolls 100px
and then I'm gone by 200px!
</p>
```
By default the `scrollPos` is `window.scrollY` but you can use an element distance from the top of the screen instead. You can either pass in a selector `laxxx-anchor="#bio"` or set it to use itself `laxxx-anchor="self"` (this is the default for all presets) e.g.
By default the `scrollPos` is `window.scrollY` but you can use an element distance from the top of the screen instead. You can either pass in a selector `data-lax-anchor="#bio"` or set it to use itself `data-lax-anchor="self"` (this is the default for all presets) e.g.
```html
<p laxxx-opacity="200 1, 100 1, 0 0" laxxx-anchor="self">
<p data-lax-opacity="200 1, 100 1, 0 0" data-lax-anchor="self">
I start to fade out after I'm 100px away from the top of the window
and then I'm gone by the time I reach the top!
</p>
Expand All @@ -71,15 +71,15 @@ There are also some shortcuts for useful values:
You can use these instead of integer values for the scrollPos e.g.
```html
<p laxxx-opacity="0 1, vh 0">
<p data-lax-opacity="0 1, vh 0">
I fade out as the page scrolls down and
I'm gone when the page has scrolled the view port height!
</p>
```
You can also do calculations using `( )` e.g.
```html
<p laxxx-opacity="0 1, (vh*0.5) 0">
<p data-lax-opacity="0 1, (vh*0.5) 0">
I fade out as the page scrolls down and
I'm gone when the page has scrolled half the view port height!
</p>
Expand Down Expand Up @@ -119,51 +119,51 @@ Transforms
| Transform | Key |
| ------------- | ------------- |
| opacity | laxxx-opacity |
| translate | laxxx-translate |
| translateX | laxxx-translate-x |
| translateY | laxxx-translate-y |
| scale | laxxx-scale |
| scaleX | laxxx-scale-x |
| scaleY | laxxx-scale-y |
| skew | laxxx-skew |
| skewX | laxxx-skew-x |
| skewY | laxxx-skew-y |
| rotate | laxxx-rotate |
| opacity | data-lax-opacity |
| translate | data-lax-translate |
| translateX | data-lax-translate-x |
| translateY | data-lax-translate-y |
| scale | data-lax-scale |
| scaleX | data-lax-scale-x |
| scaleY | data-lax-scale-y |
| skew | data-lax-skew |
| skewX | data-lax-skew-x |
| skewY | data-lax-skew-y |
| rotate | data-lax-rotate |
Filters (note - these may be unperformant on low powered machines)
| Filter | Key |
| ------------- | ------------- |
| brightness | laxxx-brightness |
| contrast | laxxx-contrast |
| hue-rotate | laxxx-hue-rotate |
| blur | laxxx-blur |
| invert | laxxx-invert |
| saturate | laxxx-saturate |
| grayscale | laxxx-grayscale |
| brightness | data-lax-brightness |
| contrast | data-lax-contrast |
| hue-rotate | data-lax-hue-rotate |
| blur | data-lax-blur |
| invert | data-lax-invert |
| saturate | data-lax-saturate |
| grayscale | data-lax-grayscale |
## Custom Presets
To avoid duplicate code you can define your own presets with a list of attributes e.g.
```javascript
laxxx.addPreset("myCoolPreset", function() {
lax.addPreset("myCoolPreset", function() {
return {
"laxxx-opacity": "(-vh*0.8) 40, (-vh*0.6) 0",
"laxxx-rotate": "(-vh*2) 1000, (-vh*0.5) 0"
"data-lax-opacity": "(-vh*0.8) 40, (-vh*0.6) 0",
"data-lax-rotate": "(-vh*2) 1000, (-vh*0.5) 0"
}
})
```
You can then access this preset like this:
```html
<p laxxx-preset="myCoolPreset">
<p data-lax-preset="myCoolPreset">
I'm the coolest preset in the world 😎
</p>
```
## Notes
### 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 `laxx-optimize="false"` to your element.
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.
### 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.
Expand Down
104 changes: 52 additions & 52 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,18 +6,18 @@
<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/laxxx.min.js"></script>
<!-- <script src="../src/laxxx.js"></script> -->
<script src="./lib/lax.min.js"></script>
<!-- <script src="../src/lax.js"></script> -->

<script type="text/javascript">
window.onload = function() {
laxxx.setup()
lax.setup()

document.addEventListener('scroll', function(x) {
laxxx.update(window.scrollY)
lax.update(window.scrollY)
}, false)

laxxx.update(window.scrollY)
lax.update(window.scrollY)
}
</script>

Expand Down Expand Up @@ -182,29 +182,29 @@
}

a:visited {
color: white;
color: white !important;
}

</style>
</head>


<body>
<div id="header" class="section" laxxx-opacity="0 1, (0.8*vh) 0">
<img src="./img/l.svg" style="width: 19vh; margin-left: 5vh;" laxxx-translate-x="0 0, vh 200" />
<img src="./img/a.svg" laxxx-translate-x="0 0, vh -200" />
<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" laxxx-translate-y="0 0, vh 200" />
<img src="./img/x.svg" style="margin-top: -14vh" laxxx-translate-y="0 0, vh 400" />
<img src="./img/x.svg" style="margin-top: -14vh" laxxx-translate-y="0 0, vh 600" />
<img src="./img/x.svg" style="margin-top: -14vh" laxxx-translate-y="0 0, vh 800" />
<img src="./img/x.svg" style="margin-top: -14vh" laxxx-translate-y="0 0, vh 1000" />
<h2 laxxx-scale="0 1, vh 0.2" laxxx-translate-y="0 0, vh 1200" laxxx-opacity="0 1, (vh*0.5) 0">awesum scroll effects</h2>

<h4 laxxx-opacity="0 1, (vh*0.05) 0">scroll down</h4>
<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"
laxxx-opacity="0 1, (vh*0.1) 0"
laxxx-translate-y="0 0, 200 100">
data-lax-opacity="0 1, (vh*0.1) 0"
data-lax-translate-y="0 0, 200 100">
</i>
</div>

Expand All @@ -213,126 +213,126 @@ <h4 laxxx-opacity="0 1, (vh*0.05) 0">scroll down</h4>
<div class="left">
<div class="bubble a"
style="background: #EDD943"
laxxx-preset="lazy-250"
data-lax-preset="lazy-250"
></div>

<div class="bubble c"
style="background: #ED2471; margin-left: 80pt"
laxxx-preset="lazy-100"
data-lax-preset="lazy-100"
></div>

<div class="bubble b"
style="background: #35D5E5; margin-left: 160pt"
laxxx-preset="lazy-300"
data-lax-preset="lazy-300"
></div>

<h3 laxxx-preset="driftRight" class="chunkyText" style="color: #35D5E5;">oooh!</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"
laxxx-preset="lazy-200"
data-lax-preset="lazy-200"
></div>

<div class="bubble c"
style="background: #EDD943; margin-left: -20pt"
laxxx-preset="lazy-150"
data-lax-preset="lazy-150"
></div>

<div class="bubble b"
style="background: #ED2471; margin-left: 20pt; margin-top: 200pt"
laxxx-preset="lazy-350"
data-lax-preset="lazy-350"
></div>
<h3 laxxx-preset="driftLeft" class="chunkyText" style="color: #ED2471; margin-top: 200pt;">aaah!</h3>
<h3 data-lax-preset="driftLeft" class="chunkyText" style="color: #ED2471; margin-top: 200pt;">aaah!</h3>
</div>

<h3 laxxx-preset="crazy zoomInOut" class="crazyText">sooo crazy</h3>
<h3 data-lax-preset="crazy zoomInOut" class="crazyText">sooo crazy</h3>
</div>

<div id="section2" class="section">
<div class="blockContainer" laxxx-preset="leftToRight-1.1 fadeInOut">
<div class="blockContainer" data-lax-preset="leftToRight-1.1 fadeInOut">
<div class="block"
style="background: #35D5E5;"
laxxx-preset="spin"
data-lax-preset="spin"
></div>
</div>

<div class="blockContainer" laxxx-preset="leftToRight-1.2 fadeInOut">
<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;"
laxxx-preset="spinRev-500"
data-lax-preset="spinRev-500"
></div>
</div>

<div class="blockContainer" laxxx-preset="leftToRight-1.4 fadeInOut">
<div class="blockContainer" data-lax-preset="leftToRight-1.4 fadeInOut">
<div class="block"
style="background: #ED2471; margin-top: -90pt; margin-left: -0pt;"
laxxx-preset="spin-500"
data-lax-preset="spin-500"
></div>
</div>

<div class="blockContainer" laxxx-preset="leftToRight-1.5 fadeInOut">
<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;"
laxxx-preset="spinRev-500"
data-lax-preset="spinRev-500"
></div>
</div>

<div class="blockContainer" laxxx-preset="leftToRight-1.3 fadeInOut">
<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;"
laxxx-preset="spin-500"
data-lax-preset="spin-500"
></div>
</div>

<div class="blockContainer" laxxx-preset="leftToRight-1.05 fadeInOut">
<div class="blockContainer" data-lax-preset="leftToRight-1.05 fadeInOut">
<div class="block"
style="background: #ED2471; margin-top: -30pt; margin-left: -70pt;"
laxxx-preset="spin"
data-lax-preset="spin"
></div>
</div>

<h3 laxxx-preset="leftToRight-0.8 fadeInOut" class="chunkyText" style="
<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" laxxx-preset="leftToRight-1.15 fadeInOut">
<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;"
laxxx-preset="spinRev-500"
data-lax-preset="spinRev-500"
></div>
</div>

<div class="blockContainer" laxxx-preset="leftToRight-1.45 fadeInOut">
<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;"
laxxx-preset="spin-500"
data-lax-preset="spin-500"
></div>
</div>

<div class="blockContainer" laxxx-preset="leftToRight-1.5 fadeInOut">
<div class="blockContainer" data-lax-preset="leftToRight-1.5 fadeInOut">
<div class="block"
style="background: #35D5E5; margin-top: 30pt; margin-left: -20pt;"
laxxx-preset="spinRev-500"
data-lax-preset="spinRev-500"
></div>
</div>

<div class="blockContainer" laxxx-preset="leftToRight-1.25 fadeInOut">
<div class="blockContainer" data-lax-preset="leftToRight-1.25 fadeInOut">
<div class="block"
style="background: #ED2471; margin-top: 80pt; margin-left: -10pt;"
laxxx-preset="spin-500"
data-lax-preset="spin-500"
></div>
</div>
</div>

<div id="section3" class="section">
<p laxxx-preset="linger">
<p data-lax-preset="linger">
Harness the power of scrolling and make your websites come alive!
</p>
<a class="button" laxxx-preset="linger" href="https://github.com/alexfoxy/laxxx">
Get laxxx.js
<a class="button" data-lax-preset="linger" href="https://github.com/alexfoxy/lax">
Get lax.js
</a>
</div>

Expand Down
Loading

0 comments on commit 2cec7fe

Please sign in to comment.