Awesome animate on scroll
ODE Scroll is a modern and awesome animate on scroll library using CSS3. see demos and get started now.
⚙ installation
CDN
Add styles in <head>:
<link rel="stylesheet" href="https://unpkg.com/odescroll@1.0.3/styles.css" />Add script right before closing </body> tag, and initialize ODEScroll:
<script src="https://unpkg.com/odescroll@1.0.3/odescroll.js"></script>
<script>
odescroll.init();
</script>package managers
-
npm install --save odescrollor *yarn add odescoll
import files
import { odescroll } from "odescroll"
import "odescroll/styles.css"Usage
1- Initialize
Call initialize function after dom content loaded
odescroll.init()with Options
odescroll.init({
option: value
})Options Table
| option | dataType | default | values | Description |
|---|---|---|---|---|
| transition | number | 0.8s | 0-∞ | |
| easing | string | ease-out | custem | |
| once | boolean | true | true/false | |
| oneDirection | boolean | true | true/false | |
| threshold | number | 0.8 | 0 - 1 |
custem options for each Element as Attribute
- data-odescroll-transition
- data-odescroll-easing
2- Set animation
<div data-odescroll-container>
<div data-odescroll="fade-down">
<!-- children -->
</div>
</div>with option
<div data-odescroll-container>
<div data-odescroll="fade-down" data-odescroll-transition="5" data-odescroll-easing="ease-in">
<!-- children -->
</div>
</div>Demos
Animations
- Fade animations:
- fade-up
- fade-down
- fade-left
- fade-right
- fade-up-right
- fade-up-left
- fade-down-right
- fade-down-left