UNPKG

odescroll

Version:

ODE Scroll is a modern and awesome animate on scroll library using CSS3

105 lines (74 loc) • 2.58 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
# 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>`: ```html <link rel="stylesheet" href="https://unpkg.com/odescroll@1.0.3/styles.css" /> ``` Add script right before closing `</body>` tag, and initialize ODEScroll: ```html <script src="https://unpkg.com/odescroll@1.0.3/odescroll.js"></script> <script> odescroll.init(); </script> ``` ### package managers * `npm install --save odescroll` or * `yarn add odescoll` #### import files ```js import { odescroll } from "odescroll" import "odescroll/styles.css" ``` ## Usage ### 1- Initialize Call initialize function after dom content loaded ```js odescroll.init() ``` with Options ```js 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 ```html <div data-odescroll-container> <div data-odescroll="fade-down"> <!-- children --> </div> </div> ``` with option ```html <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