odescroll
v1.0.6
Published
ODE Scroll is a modern and awesome animate on scroll library using CSS3
Maintainers
omarshaarReadme
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/[email protected]/styles.css" />Add script right before closing </body> tag, and initialize ODEScroll:
<script src="https://unpkg.com/[email protected]/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
- https://scroll.o-de.org/demos
Animations
- Fade animations:
- fade-up
- fade-down
- fade-left
- fade-right
- fade-up-right
- fade-up-left
- fade-down-right
- fade-down-left