jos-animation 0.8.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/FUNDING.yml +13 -0
- package/.github/ISSUE_TEMPLATE/bug_report.md +38 -0
- package/.github/ISSUE_TEMPLATE/feature_request.md +20 -0
- package/.prettierignore +8 -0
- package/CODE_OF_CONDUCT.md +128 -0
- package/CONTRIBUTING.md +18 -0
- package/LEARN.md +3 -0
- package/LICENSE.md +21 -0
- package/README.md +453 -0
- package/SECURITY.md +19 -0
- package/dev/index.html +422 -0
- package/dev/jos.css +647 -0
- package/dev/jos.js +413 -0
- package/dev/scroll.js +18 -0
- package/dist/.htaccess +0 -0
- package/dist/jos.css +1 -0
- package/dist/jos.debug.js +414 -0
- package/dist/jos.js +309 -0
- package/dist/jos.min.js +1 -0
- package/dist/v0.3/jos.css +225 -0
- package/dist/v0.3/jos.js +161 -0
- package/dist/v0.5/jos.css +250 -0
- package/dist/v0.5/jos.js +473 -0
- package/dist/v0.6/jos.css +250 -0
- package/dist/v0.6/jos.debug.js +2 -0
- package/dist/v0.6/jos.debug.min.js +2 -0
- package/dist/v0.6/jos.js +212 -0
- package/dist/v0.6/jos.min.js +2 -0
- package/dist/v0.7/.htaccess +0 -0
- package/dist/v0.7/jos.css +2 -0
- package/dist/v0.7/jos.debug.js +459 -0
- package/dist/v0.7/jos.dev.js +623 -0
- package/dist/v0.7/jos.js +264 -0
- package/dist/v0.7/jos.min.js +2 -0
- package/dist/v0.8/jos.css +1 -0
- package/dist/v0.8/jos.debug.js +414 -0
- package/dist/v0.8/jos.js +309 -0
- package/dist/v0.8/jos.min.js +1 -0
- package/docs/index.html +419 -0
- package/docs/index2.html +678 -0
- package/docs/indexOld.html +291 -0
- package/docs/style.css +216 -0
- package/package.json +31 -0
- package/res/7ygwKRQc_2x.jpg +0 -0
- package/res/NewvWJ8Z_2x.jpg +0 -0
- package/res/asdsad.jpg +0 -0
- package/res/cPowTYfI_2x.jpg +0 -0
- package/res/favicon.ico +0 -0
- package/res/logo.jpg +0 -0
- package/res/logo_1_sq.png +0 -0
- package/res/logo_1png-removebg-preview.png +0 -0
- package/res/logo_1png.png +0 -0
- package/res/logo_2-removebg-preview.png +0 -0
- package/res/logo_2.png +0 -0
- package/res/logo_2_sq.png +0 -0
package/README.md
ADDED
|
@@ -0,0 +1,453 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
JOS : Animation Library
|
|
3
|
+
By Jesvi Jonathan
|
|
4
|
+
-->
|
|
5
|
+
<br />
|
|
6
|
+
<p align="center">
|
|
7
|
+
<a href="https://github.com/jesvijonathan/JOS-Animation-Library">
|
|
8
|
+
<img src="./res/logo.jpg" alt="JOS Logo" height="200">
|
|
9
|
+
</a>
|
|
10
|
+
|
|
11
|
+
<h3 align="center">JOS : Animation Library</h3>
|
|
12
|
+
|
|
13
|
+
<p align="center">
|
|
14
|
+
A simple & easy to use animation library for web developers
|
|
15
|
+
<br />
|
|
16
|
+
<br />
|
|
17
|
+
<a href="https://jesvijonathan.github.io/JOS-Animation-Library"><strong>Git Pages</strong></a>
|
|
18
|
+
<br />
|
|
19
|
+
<br />
|
|
20
|
+
<a href="https://jesvijonathan.github.io/JOS-Animation-Library">View Demo</a>
|
|
21
|
+
·
|
|
22
|
+
<a href="https://github.com/jesvijonathan/JOS-Animation-Library/issues">Report Bug</a>
|
|
23
|
+
·
|
|
24
|
+
<a href="https://github.com/jesvijonathan/JOS-Animation-Library/issues">Request Feature</a>
|
|
25
|
+
</p>
|
|
26
|
+
</p>
|
|
27
|
+
|
|
28
|
+
<!-- TABLE OF CONTENTS
|
|
29
|
+
## Table of Contents
|
|
30
|
+
|
|
31
|
+
- [About This Project](#about-this-project)
|
|
32
|
+
- [Built With](#built-with)
|
|
33
|
+
- [Getting Started](#getting-started)
|
|
34
|
+
- [Prerequisites](#prerequisites)
|
|
35
|
+
- [Installation](#installation)
|
|
36
|
+
- [Normal Installation](#normal-installation)
|
|
37
|
+
- [Usage](#usage)
|
|
38
|
+
- [Contributing](#contributing)
|
|
39
|
+
- [License](#license)
|
|
40
|
+
- [Contact](#contact)
|
|
41
|
+
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
<!-- ABOUT THE PROJECT -->
|
|
45
|
+
|
|
46
|
+
## About This Project
|
|
47
|
+
|
|
48
|
+
JOS is a simple & easy to use animation library package to instantly add professional animation to your website. It was built to make my life easier while developing websites & comes with tons of features and is fully customizable. It is lightweight & has a very small footprint. The best part of all is that it has no (\*minimum) toll on performance.
|
|
49
|
+
|
|
50
|
+
- Open source, no download or tiring setup, just add a script tag (Embed).
|
|
51
|
+
- Includes Preset and expert custom animation options.
|
|
52
|
+
- Works with all major browsers & Platforms.
|
|
53
|
+
- Fast, light and small with no/min toll on performance.
|
|
54
|
+
- Simple & easy to setup for both beginners & experts.
|
|
55
|
+
- Customize animation settings and build your own scroll invoked functions
|
|
56
|
+
- And lots more stuff... explore it yourself.
|
|
57
|
+
|
|
58
|
+
This project is currently being developed by me & the dev community, So you can expect more features and updates quite often..
|
|
59
|
+
|
|
60
|
+
Was inpired by GSAP, AOS libraries. I wanted something easier to use, with great performance and wanted to make the implementation better. So I worked on this project from scratch.
|
|
61
|
+
|
|
62
|
+
Feel free to report an issue or request a feature in this repository :)
|
|
63
|
+
& for more information, Check out the [JOS Webpage](https://jesvijonathan.github.io/JOS-Animation-Library).
|
|
64
|
+
<br>
|
|
65
|
+
<br>
|
|
66
|
+
|
|
67
|
+
<code> <i>JOS</i> </code> <code> <i>v0.8</i> </code> <code><i> 6 July 2023</i></code> <code> <i>Jesvi Jonathan</i> </code>
|
|
68
|
+
|
|
69
|
+
<br>
|
|
70
|
+
|
|
71
|
+
### Built With
|
|
72
|
+
|
|
73
|
+
- [JavaScript](https://www.w3schools.com/js/)
|
|
74
|
+
- [CSS](https://www.w3schools.com/css/)
|
|
75
|
+
|
|
76
|
+
## Installation
|
|
77
|
+
|
|
78
|
+
1. Add the <code>[\<link>](https://github.com/jesvijonathan/Jesvi-Bot/releases)</code> inside the <code>\<head></code> tag :
|
|
79
|
+
|
|
80
|
+
```html
|
|
81
|
+
<link
|
|
82
|
+
id="jos-stylesheet"
|
|
83
|
+
rel="stylesheet"
|
|
84
|
+
href="https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dist/v0.8/jos.css"
|
|
85
|
+
crossorigin="anonymous"
|
|
86
|
+
/>
|
|
87
|
+
```
|
|
88
|
+
|
|
89
|
+
2. Add the <code>[\<script>](https://github.com/jesvijonathan/Jesvi-Bot/releases)</code> right after the <code>\<body></code> tag :
|
|
90
|
+
|
|
91
|
+
```html
|
|
92
|
+
<script src="https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dist/v0.8/jos.min.js"></script>
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
You can add minified version of the script by replacing <code>jos.js</code> with <code>jos.min.js</code> in the above script tag.
|
|
96
|
+
|
|
97
|
+
<!-- Use <code>defer</code> attribute in script tag to make sure the script is loaded after the DOM is loaded. -->
|
|
98
|
+
|
|
99
|
+
- <code>jos.js</code> for basic.
|
|
100
|
+
- <code>jos.min.js</code> for production use.
|
|
101
|
+
- <b><code>jos.debug.js</code></b> for <b>debugging</b> along with some other function
|
|
102
|
+
<!-- - make sure to enable <u>verbose</u> in debug level settings under the console tab in your browser's developer tools. -->
|
|
103
|
+
|
|
104
|
+
<!-- 3. Initialize JOS with default settings :
|
|
105
|
+
|
|
106
|
+
```html
|
|
107
|
+
<script>
|
|
108
|
+
JOS.init();
|
|
109
|
+
</script>
|
|
110
|
+
```
|
|
111
|
+
|
|
112
|
+
By the end of this step, you should have something like this :
|
|
113
|
+
|
|
114
|
+
```html
|
|
115
|
+
<!DOCTYPE html>
|
|
116
|
+
<html>
|
|
117
|
+
<head>
|
|
118
|
+
<link
|
|
119
|
+
id="jos-stylesheet"
|
|
120
|
+
rel="stylesheet"
|
|
121
|
+
href="https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dist/jos.css"
|
|
122
|
+
crossorigin="anonymous"
|
|
123
|
+
/>
|
|
124
|
+
</head>
|
|
125
|
+
<body>
|
|
126
|
+
<script src="https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dist/jos.min.js"></script>
|
|
127
|
+
<script>
|
|
128
|
+
JOS.init();
|
|
129
|
+
</script>
|
|
130
|
+
</body>
|
|
131
|
+
</html>
|
|
132
|
+
``` -->
|
|
133
|
+
|
|
134
|
+
## Setup :
|
|
135
|
+
|
|
136
|
+
1. Use <code>JOS.init();</code> to initialize the library with default settings.
|
|
137
|
+
|
|
138
|
+
```html
|
|
139
|
+
<!-- Initialize JOS with default settings -->
|
|
140
|
+
<script>
|
|
141
|
+
JOS.init();
|
|
142
|
+
</script>
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
2. (<b>Or</b>) Use <code>JOS.init(options);</code> to overide the default settings with your custom settings.
|
|
146
|
+
|
|
147
|
+
```html
|
|
148
|
+
<!-- Global Parameters -->
|
|
149
|
+
<script>
|
|
150
|
+
JOS.init({
|
|
151
|
+
// disable: false, // Disable JOS gloabaly | Values : 'true', 'false'
|
|
152
|
+
debugMode: true, // Enable JOS debug mode | Values : 'true', 'false'
|
|
153
|
+
passive: false, // Set the passive option for the scroll event listener | Values : 'true', 'false'
|
|
154
|
+
|
|
155
|
+
once: false, // Disable JOS after first animation | Values : 'true', 'false' || Int : 0-1000
|
|
156
|
+
animation: "fade", // JOS global animation type | Values : 'fade', 'slide', 'zoom', 'flip', 'fade-right', 'fade-left', 'fade-up', 'fade-down', 'zoom-in-right', 'zoom-in-left', 'zoom-in-up', 'zoom-in-down', 'zoom-out-right', 'zoom-out-left', 'zoom-out-up', 'zoom-out-down', 'flip-right', 'flip-left', 'flip-up', 'flip-down, spin, revolve, stretch, "my-custom-animation"
|
|
157
|
+
// animationInverse: "static", // Set the animation type for the element when it is scrolled out of view | Values : 'fade', 'slide', 'zoom', 'flip', 'fade-right', 'fade-left', 'fade-up', 'fade-down', 'zoom-in-right', 'zoom-in-left', 'zoom-in-up', 'zoom-in-down', 'zoom-out-right', 'zoom-out-left', 'zoom-out-up', 'zoom-out-down', 'flip-right', 'flip-left', 'flip-up', 'flip-down, spin, revolve, stretch, "my-custom-animation"
|
|
158
|
+
timingFunction: "ease-in-out", // JOS global timing function | Values : 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear', 'step-start', 'step-end', 'steps()', 'cubic-bezier()', 'my-custom-timing-function'
|
|
159
|
+
threshold: 0, // Set gloabal the threshold for the element to be visible | Values : 0-1
|
|
160
|
+
delay: 0, // Set global the delay for the animation to start | Values : 0,1,2,3,4,5
|
|
161
|
+
duration: 0.7, // Set global the duration for the animation playback | Values : flota : 0-1 & int : 0,1,2,3,4,5
|
|
162
|
+
|
|
163
|
+
// startVisible: "true", // Set whether the element should animate when the page is loaded | Values : 'true', 'false' || MS : 0-10000
|
|
164
|
+
// scrollDirection: "down", // Set the scroll direction for the element to be visible | Values : 'up', 'down', 'none'
|
|
165
|
+
// intersectionRatio: 0.4, // Set the intersection ratio between which the element should be visible | Values : 0-1 (automaticaly set)
|
|
166
|
+
// rootMargin_top: "0%", // Set by which percent the element should animate out (Recommended value between 10% to -30%)
|
|
167
|
+
// rootMargin_bottom: "-50%", // Set by which percent the element should animate out (Recommended value between -10% to -60%)
|
|
168
|
+
// rootMargin: "0% 0% -50% 0%", // Set the root margin for the element to be visible | Values : _% _% _% _% (automaticaly set)
|
|
169
|
+
});
|
|
170
|
+
</script>
|
|
171
|
+
```
|
|
172
|
+
|
|
173
|
+
3. Set <code>class="jos"</code> to the element you want to animate :
|
|
174
|
+
|
|
175
|
+
```html
|
|
176
|
+
<!-- JOS class is required to animate the element -->
|
|
177
|
+
<div class="jos"></div>
|
|
178
|
+
```
|
|
179
|
+
|
|
180
|
+
4. Set <code>data-jos</code> \*attributes to customize the element you want to animate,<br>(although these attributes are optional and will work without them) :
|
|
181
|
+
|
|
182
|
+
```html
|
|
183
|
+
<!-- JOS attributes are optional and will work without them (class="jos" is mandatory). these attributes can be used to customize the animation of the element -->
|
|
184
|
+
<div
|
|
185
|
+
class="jos"
|
|
186
|
+
data-jos_animation="zoom"
|
|
187
|
+
data-jos_once="true"
|
|
188
|
+
data-jos_duration="0.5"
|
|
189
|
+
data-jos_delay="0.2"
|
|
190
|
+
data-jos_timing-function="ease-in-out"
|
|
191
|
+
data-jos_rootMargin="0% 0% -50% 0%"
|
|
192
|
+
data-jos_rootMargin_top="-10%"
|
|
193
|
+
data-jos_rootMargin_bottom="-50%"
|
|
194
|
+
data-jos_scrollDirection="down"
|
|
195
|
+
data-jos_startVisible="true"
|
|
196
|
+
data-jos_invoke="myCustomFunction"
|
|
197
|
+
data-jos_invoke_out="myCustomFunction_onExit"
|
|
198
|
+
data-jos_anchor="#elementID"
|
|
199
|
+
></div>
|
|
200
|
+
```
|
|
201
|
+
|
|
202
|
+
See [JOS Props](#jos-attributes) for full information regarding the animation, attributes, and options.
|
|
203
|
+
|
|
204
|
+
## Custom Animation
|
|
205
|
+
|
|
206
|
+
1. Create a custom animation by adding the following code to your stylesheet :
|
|
207
|
+
|
|
208
|
+
```css
|
|
209
|
+
/* Custom animation class name starts with 'jos-' keyword followed by the animation name*/
|
|
210
|
+
.jos-my-custom-animation {
|
|
211
|
+
/* Set the initial state of the element */
|
|
212
|
+
}
|
|
213
|
+
```
|
|
214
|
+
|
|
215
|
+
2. Use your cutom animation by setting the <code>data-jos_animation</code> attribute to <code>my-custom-animation</code> :
|
|
216
|
+
|
|
217
|
+
```html
|
|
218
|
+
<div class="jos" data-jos_animation="my-custom-animation"></div>
|
|
219
|
+
```
|
|
220
|
+
|
|
221
|
+
Example : [Custom Animation]()
|
|
222
|
+
|
|
223
|
+
## Custom Inverse Animation
|
|
224
|
+
|
|
225
|
+
1. Create a custom inverse animation by adding the following code to your stylesheet :
|
|
226
|
+
|
|
227
|
+
```css
|
|
228
|
+
/* Custom inverse animation class name starts with 'jos-' keyword followed by the animation name*/
|
|
229
|
+
.jos-my-custom-animation-inverse {
|
|
230
|
+
/* Set the initial state of the element */
|
|
231
|
+
}
|
|
232
|
+
```
|
|
233
|
+
|
|
234
|
+
2. Use your cutom inverse animation by setting the <code>data-jos_animationInverse</code> attribute to <code>my-custom-animation-inverse</code> :
|
|
235
|
+
|
|
236
|
+
```html
|
|
237
|
+
<div class="jos" data-jos_animationInverse="my-custom-animation-inverse"></div>
|
|
238
|
+
```
|
|
239
|
+
|
|
240
|
+
This is especially useful when you want to animate an element when it is **scrolled out of its rootMargin**, this gives more customizability for beautiful animations.
|
|
241
|
+
|
|
242
|
+
Example : [Custom Inverse Animation]()
|
|
243
|
+
|
|
244
|
+
## Playable Animation
|
|
245
|
+
|
|
246
|
+
1. Create a playable animation by adding the following code to your stylesheet :
|
|
247
|
+
|
|
248
|
+
```css
|
|
249
|
+
/* Custom playable animation class name starts with 'jos-' keyword followed by the animation name*/
|
|
250
|
+
|
|
251
|
+
/* My Custom Playable Animation */
|
|
252
|
+
.jos-my-custom-animation {
|
|
253
|
+
transition: 1s;
|
|
254
|
+
animation: jos-my-custom-animation 1s ease-in-out infinite;
|
|
255
|
+
transform: translateX(100px);
|
|
256
|
+
}
|
|
257
|
+
/* Add Keyframes */
|
|
258
|
+
@keyframes jos-my-custom-animation {
|
|
259
|
+
0% {
|
|
260
|
+
opacity: 1;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
50% {
|
|
264
|
+
transform: translateX(-100px);
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
```
|
|
268
|
+
|
|
269
|
+
1. Use the playable animation by setting the <code>data-jos_animation</code> attribute to <code>my-custom-animation</code> & <code>data-jos_animationInverse</code> attribute to <code>my-custom-animation-play</code> :
|
|
270
|
+
|
|
271
|
+
```html
|
|
272
|
+
<div
|
|
273
|
+
class="jos"
|
|
274
|
+
data-jos_animation="my-custom-animation"
|
|
275
|
+
data-jos_animationinverse="static"
|
|
276
|
+
></div>
|
|
277
|
+
```
|
|
278
|
+
|
|
279
|
+
Here the <code>data-jos_animationinverse</code> attribute is set to <code>static</code> to prevent the element from animating out of view & to keep it in the final state. The Playable animation is triggered and starts playing when the element is scrolled into view.
|
|
280
|
+
|
|
281
|
+
Example : [Playable Animation]()
|
|
282
|
+
|
|
283
|
+
## Custom Timing Function
|
|
284
|
+
|
|
285
|
+
1. Create a custom timing function by adding the following code to your stylesheet :
|
|
286
|
+
|
|
287
|
+
```css
|
|
288
|
+
/* Custom timing function attribute name starts with 'data-jos_timing_function' keyword & a custom name of your choice */
|
|
289
|
+
[data-jos_timing_function="myCustom-timingFunc"] {
|
|
290
|
+
/* Set the timing of the element */
|
|
291
|
+
transition-timing-function: cubic-bezier(0.2, 0.5, 0.2, 0.5) !important;
|
|
292
|
+
}
|
|
293
|
+
```
|
|
294
|
+
|
|
295
|
+
2. Use your cutom timing function by setting the <code>data-jos_timing-function</code> attribute to <code>my-custom-timing-function</code> :
|
|
296
|
+
|
|
297
|
+
```html
|
|
298
|
+
<div class="jos" data-jos_timing-function="myCustom-timingFunc"></div>
|
|
299
|
+
```
|
|
300
|
+
|
|
301
|
+
Example : [Custom Timing Function]()
|
|
302
|
+
|
|
303
|
+
## Anchors to trigger animation
|
|
304
|
+
|
|
305
|
+
1. Create an element that you want to use as an anchor & add an <code>id</code> to it :
|
|
306
|
+
|
|
307
|
+
```html
|
|
308
|
+
<!-- My reference anchor element -->
|
|
309
|
+
<div id="myElement"></div>
|
|
310
|
+
```
|
|
311
|
+
|
|
312
|
+
1. Create an element that you want to animate & add the <code>data-jos_anchor</code> attribute to it, with the id starting with suffix <code>#</code> :
|
|
313
|
+
|
|
314
|
+
```html
|
|
315
|
+
<!-- My animated element -->
|
|
316
|
+
<div class="jos" data-jos_anchor="#myElement"></div>
|
|
317
|
+
```
|
|
318
|
+
|
|
319
|
+
This triggers the animation when the <code>myElement</code> element is scrolled into view.<br>
|
|
320
|
+
This feature is useful especially when you want to animate an element which is in a <b>fixed position</b>.
|
|
321
|
+
|
|
322
|
+
Example : [Anchor](https://github.com/jesvijonathan/JOS-Animation-Library/blob/master/dev/index.html?plain=1#L35)
|
|
323
|
+
|
|
324
|
+
## Direction Based Animation
|
|
325
|
+
|
|
326
|
+
1. Create an element that you want to animate & add the <code>data-jos_scrollDirection</code> attribute to it :
|
|
327
|
+
|
|
328
|
+
```html
|
|
329
|
+
<!-- My animated element -->
|
|
330
|
+
<div class="jos" data-jos_scrollDirection="down"></div>
|
|
331
|
+
```
|
|
332
|
+
|
|
333
|
+
This triggers the animation when the element is scrolled into view from the up to <code>down</code> direction.<br> & you can do the same for down to <code>up</code> direction.
|
|
334
|
+
|
|
335
|
+
This is partciluarly useful when you want to animate an element when it is **scrolled into view from a particular direction.**
|
|
336
|
+
|
|
337
|
+
Example : [Direction Based Animation]()
|
|
338
|
+
|
|
339
|
+
## Start Visible
|
|
340
|
+
|
|
341
|
+
1. Create an element that you want to have a visible state when the page is loaded & add the <code>data-jos_startVisible</code> attribute to it :
|
|
342
|
+
|
|
343
|
+
```html
|
|
344
|
+
<!-- My animated element -->
|
|
345
|
+
<div class="jos" data-jos_startVisible="true"></div>
|
|
346
|
+
```
|
|
347
|
+
|
|
348
|
+
This sets the element to be visivle when the page is loaded. you can add a delay to it by setting the value in <code>ms</code> :
|
|
349
|
+
|
|
350
|
+
```html
|
|
351
|
+
<!-- My animated element that is visivle with a given timer/delay in ms-->
|
|
352
|
+
<div class="jos" data-jos_startVisible="3000"></div>
|
|
353
|
+
```
|
|
354
|
+
|
|
355
|
+
This sets the element to be visivle when the page is loaded after <code>3000</code>ms or instantly if the value is <code>0</code> (or) <code>true</code>.
|
|
356
|
+
|
|
357
|
+
This feature is useful especially when you want an element which is in a <b>fixed position, or is present in the landing page</b> to be at initially in a visible state with no animation .
|
|
358
|
+
|
|
359
|
+
Example : [Start Visible]()
|
|
360
|
+
|
|
361
|
+
## Create Custom Function
|
|
362
|
+
|
|
363
|
+
1. Create a custom function by adding the following code to your script :
|
|
364
|
+
|
|
365
|
+
```js
|
|
366
|
+
// Create a custom function
|
|
367
|
+
function myCustomFunction() {
|
|
368
|
+
// Do something
|
|
369
|
+
}
|
|
370
|
+
```
|
|
371
|
+
|
|
372
|
+
2. Use your cutom function by setting the <code>data-jos_invoke</code> attribute to <code>myCustomFunction</code> :
|
|
373
|
+
|
|
374
|
+
```html
|
|
375
|
+
<div class="jos" data-jos_invoke="myCustomFunction"></div>
|
|
376
|
+
```
|
|
377
|
+
|
|
378
|
+
This triggers the myCustomFunction() function when the element is scrolled into view.
|
|
379
|
+
|
|
380
|
+
You can use <b><code>data-jos_invoke_out</code></b> attribute to trigger the function when the element is scrolled out of view.
|
|
381
|
+
|
|
382
|
+
Example : [Custom Function]()
|
|
383
|
+
|
|
384
|
+
## JOS Attributes
|
|
385
|
+
|
|
386
|
+
| Attribute | Type | Default | Description | Values |
|
|
387
|
+
| -------------------------- | ------------- | --------------- | -------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
388
|
+
| data-jos_animation | string | fade | Set the animation type for the element. | `fade`, `slide`, `zoom`, `flip`, `fade-right`, `fade-left`, `fade-up`, `fade-down`, `zoom-in-right`, `zoom-in-left`, `zoom-in-up`, `zoom-in-down`, `zoom-out-right`, `zoom-out-left`, `zoom-out-up`, `zoom-out-down`, `flip-right`, `flip-left`, `flip-up`, `flip-down`, `rotate`, `rotate-right`, `spin`, `spin-right`, `revolve`, `revolve-right`, `stretch`, `stretch-vertical`, `my-custom-animation` |
|
|
389
|
+
| data-jos_animationInverse | string | static | Set the Inverse animation type for the element. | `fade`, `slide`, `zoom`, `flip`, `fade-right`, `fade-left`, `fade-up`, `fade-down`, `zoom-in-right`, `zoom-in-left`, `zoom-in-up`, `zoom-in-down`, `zoom-out-right`, `zoom-out-left`, `zoom-out-up`, `zoom-out-down`, `flip-right`, `flip-left`, `flip-up`, `flip-down`, `rotate`, `rotate-right`, `spin`, `spin-right`, `revolve`, `revolve-right`, `stretch`, `stretch-vertical`, `my-custom-animation` |
|
|
390
|
+
| data-jos_once | boolean | false | Set whether the element should animate only once. | `true`, `false` |
|
|
391
|
+
| data-jos_delay | int | 0 | Set the delay for the animation to start. | `(float: 0-1)` & `(int: 0, 1, 2, 3, 4, 5)` |
|
|
392
|
+
| data-jos_duration | float | 0.4 | Set the duration for the animation playback. | `(float: 0-1)` & `(int: 0, 1, 2, 3, 4, 5)` |
|
|
393
|
+
| data-jos_timing-function | string | ease | Set the timing function for the animation playback. | `ease`, `ease-in`, `ease-out`, `ease-in-out`, `linear`, `step-start`, `step-end`, `steps(1, start)`, `steps(1, end)`, `cubic-bezier(0.1, 0.7, 1.0, 0.1)`, `my-custom-timingFunc` |
|
|
394
|
+
| data-jos_invoke | string | null | Set the function to be invoked when the element is scrolled into view. | `function`, `myCustomFunction` |
|
|
395
|
+
| data-jos_invoke_out | string | null | Set the function to be invoked when the element is scrolled out of view. | `function`, `myCustomFunction` |
|
|
396
|
+
| data-once | boolean & int | false | Set whether the element should animate only | `(boolean: true, false)` & `(int: 0-infinity)` |
|
|
397
|
+
| data-jos_rootMargin | string | 0% -10% 0% -50% | Sets the margin for an element to animate on in a viewport when scrolled. | `(string: "right% top% left% bottom%")` |
|
|
398
|
+
| data-jos_rootMargin_top | string | 0% | Sets the margin for an element to animate on the top of a viewport when scrolled. | `(string: "top%")` |
|
|
399
|
+
| data-jos_rootMargin_bottom | string | 0% | Sets the margin for an element to animate on the bottom of a viewport when scrolled. | `(string: "bottom%")` |
|
|
400
|
+
| data-jos_scrollDirection | string | down | Sets the direction for an element to animate on ina viewport when scrolled. | `(string: "up", "down", "none")` |
|
|
401
|
+
| data-jos_startVisible | boolean & int | false | Set whether the element should start at the final state when the page is loaded (also works with delay). | `(boolean: true, false)` & `(int: 0-10000 ms)` |
|
|
402
|
+
| data-jos_anchor | string | null | Sets the anchor element for an element to animate on in a viewport when scrolled. | `(string: "#elementID")` |
|
|
403
|
+
| |
|
|
404
|
+
|
|
405
|
+
<!--create a table for init, refresh, start, stop, destroy -->
|
|
406
|
+
|
|
407
|
+
## JOS Methods
|
|
408
|
+
|
|
409
|
+
| Method | Description | Parameters |
|
|
410
|
+
| --------- | ------------------------ | ------------------------------------------------------------------------------------------------------- |
|
|
411
|
+
| init() | Initialize/Reset JOS | options = `{}` (refer [JOS.Init(options)]() ) |
|
|
412
|
+
| refresh() | Refresh JOS | none |
|
|
413
|
+
| stop() | Stop/Pause JOS | state = (`0` - Stop at final state, `1` - Stop at initial state, `-1` - Pause at current state) |
|
|
414
|
+
| start() | Start/Resume JOS Service | state = (`0` - Normal/Full start, `-1` - Resume from current state) |
|
|
415
|
+
| destroy() | Destroy JOS Instance | state = (`0` - Destroy JOS instance excluding stylesheet, `1` - Full Destroy along with JOS-stylesheet) |
|
|
416
|
+
|
|
417
|
+
## Bugs and Issues
|
|
418
|
+
|
|
419
|
+
Moved to [issues](https://github.com/jesvijonathan/JOS-Animation-Library/issues)
|
|
420
|
+
|
|
421
|
+
## Contributing
|
|
422
|
+
|
|
423
|
+
- Fork it from [main branch](https://github.com/jesvijonathan/JOS-Animation-Library)
|
|
424
|
+
- Add your useful feature or fix a bug
|
|
425
|
+
- Create a pull request
|
|
426
|
+
|
|
427
|
+
## License
|
|
428
|
+
|
|
429
|
+
- [JOS](https://github.com/jesvijonathan/JOS-Animation-Library/blob/master/LICENSE.md) is licensed under the [MIT License](https://github.com/jesvijonathan/JOS-Animation-Library/blob/master/LICENSE.md).
|
|
430
|
+
|
|
431
|
+
## Used In
|
|
432
|
+
|
|
433
|
+
- [CIT Takshashila 23](https://www.cittakshashila.in/)
|
|
434
|
+
- [JOS Demo](https://jesvijonathan.github.io/JOS-Animation-Library/)
|
|
435
|
+
- [JSheet](https://https://jesvijonathan.github.io/JSheet/)
|
|
436
|
+
|
|
437
|
+
(<i>Ping Me If you have a demo</i>)
|
|
438
|
+
|
|
439
|
+
### Why use JOS ?
|
|
440
|
+
|
|
441
|
+
- <b>Performance</b>, JOS has a implementation, different from others.
|
|
442
|
+
- <b>Easy to use</b>, you can use it in your projects with very minimal effort.
|
|
443
|
+
- JOS is lightweight
|
|
444
|
+
- Customizable with own attributes and animation.
|
|
445
|
+
- Open sourced and free to use
|
|
446
|
+
|
|
447
|
+
## Credits
|
|
448
|
+
|
|
449
|
+
<div align="center">
|
|
450
|
+
|
|
451
|
+
#### <i><u>This project was solely developed by</i> [Jesvi Jonathan](https://jesvi.pythonanywhere.com)</u>
|
|
452
|
+
|
|
453
|
+
</div>
|
package/SECURITY.md
ADDED
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
# Security Policy
|
|
2
|
+
|
|
3
|
+
## Supported Versions
|
|
4
|
+
|
|
5
|
+
I would reccomend the latest version of JOS at any given point of the time line, the only reason to use an older version of the project would probably be to make use of an discontinued feature which is not available in the latest version.
|
|
6
|
+
If a feature is discontinued, it's probably because of vulnerabillities or any other deprecated factor and would not recommend it's use for too long.
|
|
7
|
+
|
|
8
|
+
| Version | Supported |
|
|
9
|
+
| ------- | ------------------ |
|
|
10
|
+
| 6.x | :white_check_mark: |
|
|
11
|
+
| 6.x | :white_check_mark: |
|
|
12
|
+
| 5.x | :white_check_mark: |
|
|
13
|
+
| < 3.0 | :x: |
|
|
14
|
+
|
|
15
|
+
## Reporting a Vulnerability
|
|
16
|
+
|
|
17
|
+
I fany vulnerability found, please open an issue with critical label and create a pull request if you have the fix for the issue.
|
|
18
|
+
|
|
19
|
+
patches and updates regarding security/vulnerabilities are top priority and will be patched as soon as possible from the day the issue is opened
|