Feat: Multiplayer sessions added using CRUD database.
This commit is contained in:
303
node_modules/aos/README.md
generated
vendored
Executable file
303
node_modules/aos/README.md
generated
vendored
Executable file
@@ -0,0 +1,303 @@
|
||||
[](http://michalsnik.github.io/aos/)
|
||||
|
||||
[](https://npmjs.org/package/aos)
|
||||
[](https://npmjs.org/package/aos)
|
||||
[](https://travis-ci.org/michalsnik/aos)
|
||||
[](https://gitter.im/michalsnik/aos?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge)
|
||||
|
||||
[](https://twitter.com/michalsnik) [](https://twitter.com/home?status=AOS%20-%20Animate%20on%20Scroll%20library%0Ahttps%3A//github.com/michalsnik/aos)
|
||||
|
||||
Small library to animate elements on your page as you scroll.
|
||||
|
||||
You may say it's like WOWJS, yeah - you're right, effect is similar to WOWJS, but I had a different idea how to make such a plugin, so here it is. CSS3 driven scroll animation library.
|
||||
|
||||
AOS allows you to animate elements as you scroll down, and up.
|
||||
If you scroll back to top, elements will animate to it's previous state and are ready to animate again if you scroll down.
|
||||
|
||||
👉 To get a better understanding how this actually works, I encourage you to check [my post on CSS-tricks](https://css-tricks.com/aos-css-driven-scroll-animation-library/).
|
||||
|
||||
---
|
||||
|
||||
### 🚀 [Demo](http://michalsnik.github.io/aos/)
|
||||
|
||||
### 🌟 Codepen Examples
|
||||
- [Different build in animations](http://codepen.io/michalsnik/pen/WxNdvq)
|
||||
- [With anchor setting in use](http://codepen.io/michalsnik/pen/jrOYVO)
|
||||
- [With anchor-placement and different easing](http://codepen.io/michalsnik/pen/EyxoNm)
|
||||
- [With simple custom animations](http://codepen.io/michalsnik/pen/WxvNvE)
|
||||
|
||||
---
|
||||
|
||||
## ❗ Attention
|
||||
From version `2.0.0` attributes `aos` are no longer supported, always use `data-aos`.
|
||||
|
||||
## ⚙ Setup
|
||||
|
||||
### Install AOS
|
||||
|
||||
- Using `bower`
|
||||
|
||||
```bash
|
||||
bower install aos --save
|
||||
```
|
||||
|
||||
- Using `npm`
|
||||
|
||||
```bash
|
||||
npm install aos --save
|
||||
```
|
||||
|
||||
- Direct download -> [click here](https://github.com/michalsnik/aos/archive/master.zip)
|
||||
|
||||
|
||||
### Link styles
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="bower_components/aos/dist/aos.css" />
|
||||
```
|
||||
|
||||
### Add scripts
|
||||
|
||||
```html
|
||||
<script src="bower_components/aos/dist/aos.js"></script>
|
||||
```
|
||||
|
||||
AOS from version `1.2.0` is available as UMD module, so you can use it as AMD, Global, Node or ES6 module.
|
||||
|
||||
### Init AOS
|
||||
|
||||
```javascript
|
||||
<script>
|
||||
AOS.init();
|
||||
</script>
|
||||
```
|
||||
|
||||
## 🤔 How to use it?
|
||||
|
||||
### Basic usage
|
||||
|
||||
All you have to do is to add `data-aos` attribute to html element, like so:
|
||||
|
||||
```html
|
||||
<div data-aos="animation_name">
|
||||
```
|
||||
|
||||
Script will trigger "animation_name" animation on this element, if you scroll to it.
|
||||
|
||||
[Down below](https://github.com/michalsnik/aos#-animations) is a list of all available animations for now :)
|
||||
|
||||
### 🔥 Advanced settings
|
||||
|
||||
These settings can be set both on certain elements, or as default while initializing script (in options object without `data-` part).
|
||||
|
||||
| Attribute | Description | Example value | Default value |
|
||||
|---------------------------|-------------|---------------|---------|
|
||||
| *`data-aos-offset`* | Change offset to trigger animations sooner or later (px) | 200 | 120 |
|
||||
| *`data-aos-duration`* | *Duration of animation (ms) | 600 | 400 |
|
||||
| *`data-aos-easing`* | Choose timing function to ease elements in different ways | ease-in-sine | ease |
|
||||
| *`data-aos-delay`* | Delay animation (ms) | 300 | 0 |
|
||||
| *`data-aos-anchor`* | Anchor element, whose offset will be counted to trigger animation instead of actual elements offset | #selector | null |
|
||||
| *`data-aos-anchor-placement`* | Anchor placement - which one position of element on the screen should trigger animation | top-center | top-bottom |
|
||||
| *`data-aos-once`* | Choose wheter animation should fire once, or every time you scroll up/down to element | true | false |
|
||||
|
||||
*Duration accept values from 50 to 3000, with step 50ms, it's because duration of animation is handled by css, and to not make css longer than it is already I created implementations only in this range. I think this should be good for almost all cases.
|
||||
|
||||
If not, you may write simple CSS on your page that will add another duration option value available, for example:
|
||||
|
||||
```css
|
||||
body[data-aos-duration='4000'] [data-aos], [data-aos][data-aos][data-aos-duration='4000']{
|
||||
transition-duration: 4000ms;
|
||||
}
|
||||
```
|
||||
|
||||
This code will add 4000ms duration available for you to set on AOS elements, or to set as global duration while initializing AOS script.
|
||||
|
||||
Notice that double `[data-aos][data-aos]` - it's not a mistake, it is a trick, to make individual settings more important than global, without need to write ugly "!important" there :)
|
||||
|
||||
`data-aos-anchor-placement` - You can set different placement option on each element, the principle is pretty simple, each anchor-placement option contains two words i.e. `top-center`. This means that animation will be triggered when `top` of element will reach `center` of the window.
|
||||
`bottom-top` means that animation will be triggered when `bottom` of an element reach `top` of the window, and so on.
|
||||
Down below you can find list of all anchor-placement options.
|
||||
|
||||
#### Examples:
|
||||
|
||||
```html
|
||||
<div data-aos="fade-zoom-in" data-aos-offset="200" data-aos-easing="ease-in-sine" data-aos-duration="600">
|
||||
```
|
||||
```html
|
||||
<div data-aos="flip-left" data-aos-delay="100" data-aos-anchor=".example-selector">
|
||||
```
|
||||
```html
|
||||
<div data-aos="fade-up" data-aos-anchor-placement="top-center">
|
||||
```
|
||||
|
||||
|
||||
#### API
|
||||
|
||||
AOS object is exposed as a global variable, for now there are three methods available:
|
||||
|
||||
* `init` - initialize AOS
|
||||
* `refresh` - recalculate all offsets and positions of elements (called on window resize)
|
||||
* `refreshHard` - reinit array with AOS elements and trigger `refresh` (called on DOM changes that are related to `aos` elements)
|
||||
|
||||
Example execution:
|
||||
```javascript
|
||||
AOS.refresh();
|
||||
```
|
||||
|
||||
By default AOS is watching for DOM changes and if there are any new elements loaded asynchronously or when something is removed from DOM it calls `refreshHard` automatically. In browsers that don't support `MutationObserver` like IE you might need to call `AOS.refreshHard()` by yourself.
|
||||
|
||||
`refresh` method is called on window resize and so on, as it doesn't require to build new store with AOS elements and should be as light as possible.
|
||||
|
||||
### Global settings
|
||||
|
||||
If you don't want to change setting for each element separately, you can change it globally.
|
||||
|
||||
To do this, pass options object to `init()` function, like so:
|
||||
|
||||
```javascript
|
||||
<script>
|
||||
AOS.init({
|
||||
offset: 200,
|
||||
duration: 600,
|
||||
easing: 'ease-in-sine',
|
||||
delay: 100,
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
#### Additional configuration
|
||||
|
||||
These settings can be set only in options object while initializing AOS.
|
||||
|
||||
| Setting | Description | Example value | Default value |
|
||||
|---------------------------|-------------|---------------|---------|
|
||||
| *`disable`* | Condition when AOS should be disabled | mobile | false |
|
||||
| *`startEvent`* | Name of event, on which AOS should be initialized | exampleEvent | DOMContentLoaded |
|
||||
|
||||
##### Disabling AOS
|
||||
|
||||
If you want to disable AOS on certain device or under any statement you can set `disable` option. Like so:
|
||||
|
||||
```javascript
|
||||
<script>
|
||||
AOS.init({
|
||||
disable: 'mobile'
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
There are several options that you can use to fit AOS perfectly into your project, you can pass one of three device types:
|
||||
`mobile` (phones and tablets), `phone` or `tablet`. This will disable AOS on those certains devices. But if you want make your own condition, simple type your statement instead of device type name:
|
||||
|
||||
```javascript
|
||||
disable: window.innerWidth < 1024
|
||||
```
|
||||
|
||||
There is also posibility to pass a `function`, which should at the end return `true` or `false`:
|
||||
|
||||
```javascript
|
||||
disable: function () {
|
||||
var maxWidth = 1024;
|
||||
return window.innerWidth < maxWidth;
|
||||
}
|
||||
```
|
||||
|
||||
##### Start event
|
||||
|
||||
If you don't want to initialize AOS on `DOMContentLoaded` event, you can pass your own event name and trigger it whenever you want. AOS is listening for this event on `document` element.
|
||||
|
||||
```javascript
|
||||
<script>
|
||||
AOS.init({
|
||||
startEvent: 'someCoolEvent'
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
**Important note:** If you set `startEvent: 'load'` it will add event listener on `window` instead of `document`.
|
||||
|
||||
|
||||
### 👻 Animations
|
||||
|
||||
There are serveral predefined animations you can use already:
|
||||
|
||||
* Fade animations:
|
||||
* fade
|
||||
* fade-up
|
||||
* fade-down
|
||||
* fade-left
|
||||
* fade-right
|
||||
* fade-up-right
|
||||
* fade-up-left
|
||||
* fade-down-right
|
||||
* fade-down-left
|
||||
|
||||
* Flip animations:
|
||||
* flip-up
|
||||
* flip-down
|
||||
* flip-left
|
||||
* flip-right
|
||||
|
||||
* Slide animations:
|
||||
* slide-up
|
||||
* slide-down
|
||||
* slide-left
|
||||
* slide-right
|
||||
|
||||
* Zoom animations:
|
||||
* zoom-in
|
||||
* zoom-in-up
|
||||
* zoom-in-down
|
||||
* zoom-in-left
|
||||
* zoom-in-right
|
||||
* zoom-out
|
||||
* zoom-out-up
|
||||
* zoom-out-down
|
||||
* zoom-out-left
|
||||
* zoom-out-right
|
||||
|
||||
### Anchor placement:
|
||||
|
||||
* top-bottom
|
||||
* top-center
|
||||
* top-top
|
||||
* center-bottom
|
||||
* center-center
|
||||
* center-top
|
||||
* bottom-bottom
|
||||
* bottom-center
|
||||
* bottom-top
|
||||
|
||||
|
||||
### Easing functions:
|
||||
|
||||
You can choose one of these timing function to animate elements nicely:
|
||||
|
||||
* linear
|
||||
* ease
|
||||
* ease-in
|
||||
* ease-out
|
||||
* ease-in-out
|
||||
* ease-in-back
|
||||
* ease-out-back
|
||||
* ease-in-out-back
|
||||
* ease-in-sine
|
||||
* ease-out-sine
|
||||
* ease-in-out-sine
|
||||
* ease-in-quad
|
||||
* ease-out-quad
|
||||
* ease-in-out-quad
|
||||
* ease-in-cubic
|
||||
* ease-out-cubic
|
||||
* ease-in-out-cubic
|
||||
* ease-in-quart
|
||||
* ease-out-quart
|
||||
* ease-in-out-quart
|
||||
|
||||
## ✌️ [Contributing](CONTRIBUTING.md)
|
||||
|
||||
## 📝 [Changelog](CHANGELOG.md)
|
||||
|
||||
## ❔Questions
|
||||
|
||||
If you have any questions, ideas or whatsoever, please check [AOS contribution guide](CONTRIBUTING.md) and don't hesitate to create new issues.
|
||||
Reference in New Issue
Block a user