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.
Files changed (55) hide show
  1. package/.github/FUNDING.yml +13 -0
  2. package/.github/ISSUE_TEMPLATE/bug_report.md +38 -0
  3. package/.github/ISSUE_TEMPLATE/feature_request.md +20 -0
  4. package/.prettierignore +8 -0
  5. package/CODE_OF_CONDUCT.md +128 -0
  6. package/CONTRIBUTING.md +18 -0
  7. package/LEARN.md +3 -0
  8. package/LICENSE.md +21 -0
  9. package/README.md +453 -0
  10. package/SECURITY.md +19 -0
  11. package/dev/index.html +422 -0
  12. package/dev/jos.css +647 -0
  13. package/dev/jos.js +413 -0
  14. package/dev/scroll.js +18 -0
  15. package/dist/.htaccess +0 -0
  16. package/dist/jos.css +1 -0
  17. package/dist/jos.debug.js +414 -0
  18. package/dist/jos.js +309 -0
  19. package/dist/jos.min.js +1 -0
  20. package/dist/v0.3/jos.css +225 -0
  21. package/dist/v0.3/jos.js +161 -0
  22. package/dist/v0.5/jos.css +250 -0
  23. package/dist/v0.5/jos.js +473 -0
  24. package/dist/v0.6/jos.css +250 -0
  25. package/dist/v0.6/jos.debug.js +2 -0
  26. package/dist/v0.6/jos.debug.min.js +2 -0
  27. package/dist/v0.6/jos.js +212 -0
  28. package/dist/v0.6/jos.min.js +2 -0
  29. package/dist/v0.7/.htaccess +0 -0
  30. package/dist/v0.7/jos.css +2 -0
  31. package/dist/v0.7/jos.debug.js +459 -0
  32. package/dist/v0.7/jos.dev.js +623 -0
  33. package/dist/v0.7/jos.js +264 -0
  34. package/dist/v0.7/jos.min.js +2 -0
  35. package/dist/v0.8/jos.css +1 -0
  36. package/dist/v0.8/jos.debug.js +414 -0
  37. package/dist/v0.8/jos.js +309 -0
  38. package/dist/v0.8/jos.min.js +1 -0
  39. package/docs/index.html +419 -0
  40. package/docs/index2.html +678 -0
  41. package/docs/indexOld.html +291 -0
  42. package/docs/style.css +216 -0
  43. package/package.json +31 -0
  44. package/res/7ygwKRQc_2x.jpg +0 -0
  45. package/res/NewvWJ8Z_2x.jpg +0 -0
  46. package/res/asdsad.jpg +0 -0
  47. package/res/cPowTYfI_2x.jpg +0 -0
  48. package/res/favicon.ico +0 -0
  49. package/res/logo.jpg +0 -0
  50. package/res/logo_1_sq.png +0 -0
  51. package/res/logo_1png-removebg-preview.png +0 -0
  52. package/res/logo_1png.png +0 -0
  53. package/res/logo_2-removebg-preview.png +0 -0
  54. package/res/logo_2.png +0 -0
  55. package/res/logo_2_sq.png +0 -0
package/docs/indexOld.html ADDED
@@ -0,0 +1,291 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>JOS : Animation Library | Demo</title>
5
+ <link
6
+ id="jos-stylesheet"
7
+ rel="stylesheet"
8
+ href="https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dev/jos.css"
9
+ crossorigin="anonymous"
10
+ />
11
+ <!-- <link rel="stylesheet" href="../dev/jos.css" id="jos-stylesheet" /> -->
12
+
13
+ <meta
14
+ name="description"
15
+ content="JOS is an animation library package to instantly add complex animation to your website "
16
+ />
17
+ <meta name="author" content="Jesvi Jonathan" />
18
+ <meta name="revised" content="JOS: Animation Library, 17/5/2023" />
19
+ <meta http-equiv="Permissions-Policy" content="interest-cohort=()" />
20
+ </head>
21
+ <body>
22
+ <div class="rootmargin jos" id="rootmarginBorder">
23
+ <!-- <div style="opacity: 0.8">Out</div>
24
+ <div style="position: relative; opacity: 0.8; top: 94%">In</div> -->
25
+ </div>
26
+ <center
27
+ class="jos"
28
+ data-jos_animation="fade-up"
29
+ title="JOS : Animation Library (v0.7.1)"
30
+ data-jos_duration="1"
31
+ >
32
+ <h1
33
+ class="TIT jos"
34
+ data-jos_animation="fade-down"
35
+ data-jos_duration="1"
36
+ data-jos_invoke_out="disroot2"
37
+ data-jos_invoke="disroot"
38
+ >
39
+ JOS Demo
40
+ </h1>
41
+ <div
42
+ class="TIT2 jos"
43
+ data-jos_animation="fade-down"
44
+ data-jos_duration="0.7.1"
45
+ title="Scroll down to view animations"
46
+ >
47
+ Scroll Down
48
+ </div>
49
+ <br />
50
+ <a
51
+ class="nest jos"
52
+ data-jos_animation="zoom-out-up"
53
+ data-jos_duration="0.8"
54
+ href="./index.html"
55
+ title="Check other demos"
56
+ >Next Demo</a
57
+ >
58
+ </center>
59
+ <div
60
+ class="elements jos"
61
+ data-jos_animation="stretch"
62
+ data-jos_duration="0.2"
63
+ >
64
+ <div
65
+ class="box jos"
66
+ data-jos_animation="slide"
67
+ title="Animation : slide"
68
+ ></div>
69
+ <div
70
+ class="box jos"
71
+ id="elem"
72
+ data-jos_animation="fade"
73
+ title="Animation : fade"
74
+ ></div>
75
+ <div
76
+ class="box jos"
77
+ data-jos_animation="zoom"
78
+ title="Animation : zoom"
79
+ ></div>
80
+
81
+ <div
82
+ class="box jos"
83
+ data-jos_animation="zoom-in"
84
+ title="Animation : zoom-in"
85
+ ></div>
86
+ <div
87
+ class="box jos"
88
+ data-jos_animation="flip"
89
+ title="Animation : flip"
90
+ ></div>
91
+
92
+ <div
93
+ class="box jos"
94
+ data-jos_animation="spin"
95
+ title="Animation : spin"
96
+ ></div>
97
+ <div
98
+ class="box jos"
99
+ data-jos_animation="fade-up"
100
+ title="Animation : fade-up"
101
+ ></div>
102
+ <div
103
+ class="box jos"
104
+ data-jos_animation="fade-right"
105
+ title="Animation : fade-right"
106
+ ></div>
107
+
108
+ <div
109
+ class="box jos"
110
+ data-jos_animation="stretch"
111
+ title="Animation : stretch"
112
+ ></div>
113
+
114
+ <div
115
+ class="box jos"
116
+ data-jos_animation="rotate"
117
+ title="Animation : rotate"
118
+ ></div>
119
+ <div
120
+ class="box jos"
121
+ data-jos_animation="zoom-in-left"
122
+ title="Animation : zoom-in-left"
123
+ ></div>
124
+
125
+ <div
126
+ class="box jos"
127
+ data-jos_animation="flip-left"
128
+ title="Animation : flip-left"
129
+ ></div>
130
+ <div
131
+ class="box jos"
132
+ data-jos_animation="stretch-vertical"
133
+ title="Animation : stretch-vertical"
134
+ ></div>
135
+
136
+ <div class="box jos"></div>
137
+ </div>
138
+ </body>
139
+ <footer>JOS | 2023 | By Jesvi Jonathan</footer>
140
+ </html>
141
+ <script src="https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dev/jos.js"></script>
142
+ <!-- <script src="https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dist/jos.min.js"></script> -->
143
+ <!-- <script src="../dev/jos.js"></script> -->
144
+ <script>
145
+ function mytestfunc2() {}
146
+
147
+ function disroot() {
148
+ let elemm = document.getElementById("rootmarginBorder");
149
+ elemm.classList.add("jos-fade");
150
+ }
151
+ function disroot2() {
152
+ let elemm = document.getElementById("rootmarginBorder");
153
+ elemm.classList.remove("jos-fade");
154
+ }
155
+ </script>
156
+ <!-- Global Parameters -->
157
+ <script>
158
+ JOS.init({
159
+ // disable: false, // Disable JOS gloabaly | Values : 'true', 'false'
160
+ debugMode: true, // Enable JOS debug mode | Values : 'true', 'false'
161
+ passive: false, // Set the passive option for the scroll event listener | Values : 'true', 'false'
162
+
163
+ once: false, // Disable JOS after first animation | Values : 'true', 'false'
164
+ 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, "my-custom-animation"
165
+ timingFunction: "ease", // 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'
166
+ threshold: 0, // Set gloabal the threshold for the element to be visible | Values : 0-1
167
+ delay: 0, // Set global the delay for the animation to start | Values : 0,1,2,3,4,5
168
+ duration: 0.5, // Set global the duration for the animation playback | Values : flota : 0-1 & int : 0,1,2,3,4,5
169
+
170
+ // rootMargin_top: "0%", // Set by which percent the element should animate out (Recommended value between 10% to -30%)
171
+ // rootMargin_bottom: "-50%", // Set by which percent the element should animate out (Recommended value between -10% to -60%)
172
+ rootMargin: "-10% 0% -30% 0%", // Set the root margin for the element to be visible | Values : _% _% _% _% (automaticaly set)
173
+ // intersectionRatio: 0.4, // Set the intersection ratio between which the element should be visible | Values : 0-1 (automaticaly set)
174
+ // rootMargin: jos_rootMargin_top + " 0% " + jos_rootMargin_bottom + " 0%"; // Set the root margin for the element to be visible | Values : _% _% _% _% (automaticaly set)
175
+
176
+ // animate_out: false, // Set whether elements should animate out while scrolling past them | Values : 'true', 'false'
177
+ // debounce: 0, // Set global the debounce time/rate for listening to scroll events | Values : 0-1000
178
+ });
179
+ </script>
180
+
181
+ <style>
182
+ footer {
183
+ display: flex;
184
+ flex-direction: column;
185
+ justify-content: center;
186
+ align-items: center;
187
+ margin-top: 8vw;
188
+ padding: 6vw;
189
+ }
190
+ * {
191
+ left: 0;
192
+ top: 0;
193
+ }
194
+ body {
195
+ background: rgb(255, 255, 255);
196
+ overflow-x: hidden;
197
+ }
198
+ .rootmargin {
199
+ border: 2px dashed rgba(43, 43, 43, 0.4);
200
+ width: 100%;
201
+ border-left: 0px;
202
+ border-right: 0px;
203
+ left: 0;
204
+ height: 60%;
205
+ top: 10%;
206
+ position: fixed;
207
+ z-index: -1;
208
+ }
209
+ .elements {
210
+ display: flex;
211
+ justify-content: center;
212
+ align-items: center;
213
+ gap: 5vw;
214
+ flex-direction: column;
215
+ margin-top: 30%;
216
+ }
217
+ .box {
218
+ height: 8vw;
219
+ width: 8vw;
220
+ background: rgb(0, 0, 0);
221
+ z-index: 1000;
222
+ }
223
+ .TIT {
224
+ margin-top: 40vh;
225
+ font-size: 3rem;
226
+ }
227
+ .nest {
228
+ display: block;
229
+ top: 10vh;
230
+ width: fit-content;
231
+ position: relative;
232
+ color: black;
233
+ text-decoration: none;
234
+ text-align: center;
235
+ border: 2px solid black;
236
+ padding: 5px 30px;
237
+ font-size: 1rem;
238
+ cursor: pointer;
239
+ z-index: 9999;
240
+ left: unset;
241
+ }
242
+ @media screen and (max-width: 1000px) {
243
+ .TIT {
244
+ margin-top: 40vh;
245
+ font-size: 7rem;
246
+ z-index: 1000;
247
+ }
248
+ .TIT2 {
249
+ font-size: 3rem;
250
+ z-index: 1000;
251
+ }
252
+ .rootmargin {
253
+ border: 2px dashed rgb(43, 43, 43);
254
+ width: 100%;
255
+ border-left: 0px;
256
+ border-right: 0px;
257
+ left: 0;
258
+ height: 60%;
259
+ top: 10%;
260
+ position: fixed;
261
+ }
262
+ .elements {
263
+ display: flex;
264
+ justify-content: center;
265
+ align-items: center;
266
+ gap: 14vw;
267
+ flex-direction: column;
268
+ margin-top: 42%;
269
+ }
270
+ .box {
271
+ height: 30vw;
272
+ width: 30vw;
273
+ background: rgb(0, 0, 0);
274
+ }
275
+ }
276
+ </style>
277
+
278
+ <!-- Google tag (gtag.js) -->
279
+ <script
280
+ async
281
+ src="https://www.googletagmanager.com/gtag/js?id=G-PNHW4PMZQJ"
282
+ ></script>
283
+ <script>
284
+ window.dataLayer = window.dataLayer || [];
285
+ function gtag() {
286
+ dataLayer.push(arguments);
287
+ }
288
+ gtag("js", new Date());
289
+
290
+ gtag("config", "G-PNHW4PMZQJ");
291
+ </script>
package/docs/style.css ADDED
@@ -0,0 +1,216 @@
1
+ :root {
2
+ --color-bg: #262626;
3
+ --color-bg-hover: #2d2d2d;
4
+ --color-text: #ffffff;
5
+ --color-border: #e0e0e0;
6
+ }
7
+
8
+ * {
9
+ margin: 0;
10
+ padding: 0;
11
+ top: 0;
12
+ left: 0;
13
+ }
14
+
15
+ html,
16
+ body {
17
+ overflow-x: hidden;
18
+ width: 100vw;
19
+ }
20
+ body {
21
+ background-color: var(--color-bg);
22
+ color: var(--color-text);
23
+ font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
24
+ }
25
+
26
+ h1 {
27
+ font-size: 2.3em;
28
+ font-weight: 400;
29
+ position: absolute;
30
+ transform: translate(-50%, -50%);
31
+ left: 50%;
32
+ top: 50%;
33
+ width: 88%;
34
+ text-align: center;
35
+ }
36
+ h3 {
37
+ font-size: 1em;
38
+ font-weight: 400;
39
+ position: absolute;
40
+ transform: translate(-50%, -50%);
41
+ left: 50%;
42
+ top: 65%;
43
+ width: 88%;
44
+ text-align: center;
45
+ }
46
+ h3 a {
47
+ text-decoration: none;
48
+ color: white !important;
49
+ }
50
+
51
+ section {
52
+ min-height: 100vh;
53
+ }
54
+
55
+ footer {
56
+ display: flex;
57
+ flex-direction: column;
58
+ justify-content: center;
59
+ align-items: center;
60
+ margin-top: 8vw;
61
+ padding: 6vw;
62
+ }
63
+
64
+ .demo-container {
65
+ margin: 8vw;
66
+ min-height: 50vh;
67
+ display: flex;
68
+ align-items: center;
69
+ flex-direction: row;
70
+ justify-content: space-evenly;
71
+ border: 0.1vw solid var(--color-border);
72
+ border-radius: 4px;
73
+ background: white;
74
+ color: black;
75
+ transition: 0.2s ease;
76
+ font-size: 2em;
77
+ font-weight: bold;
78
+ align-content: center;
79
+ overflow: hidden;
80
+ }
81
+ /* .demo-container:hover {
82
+ background-color: var(--color-bg-hover);
83
+ } */
84
+
85
+ .demo-name {
86
+ min-width: 20vw;
87
+ min-height: 30vw;
88
+ display: flex;
89
+ align-items: center;
90
+ flex-direction: row;
91
+ justify-content: center;
92
+ border-radius: 4px;
93
+ background: white;
94
+ color: black;
95
+ transition: 0.2s ease-in-out;
96
+ font-weight: bold;
97
+ }
98
+ .demo-text {
99
+ margin-left: 10vw;
100
+ margin-right: 10vw;
101
+ /* border: 2px solid black; */
102
+ width: fit-content;
103
+ transition: 0.2s ease-in-out;
104
+ }
105
+
106
+ .demo-code {
107
+ font-size: 0.8em;
108
+ background-color: #2d2d2d;
109
+ width: min-content;
110
+ height: min-content;
111
+ font-size: 0.4em;
112
+ border-radius: 4px;
113
+ transition: 0.2s ease-in-out;
114
+ font-size: 0.8em;
115
+ cursor: none;
116
+ width: 0;
117
+ opacity: 0;
118
+ display: flex;
119
+ width: 0;
120
+ flex-direction: column;
121
+ align-content: center;
122
+ justify-content: center;
123
+ align-items: center;
124
+ }
125
+
126
+ .demo-container:hover .demo-text {
127
+ margin-left: 10vw;
128
+ width: 25vw;
129
+ }
130
+ .demo-container:hover .demo-code {
131
+ opacity: 1;
132
+ width: 33vw;
133
+ cursor: text;
134
+ margin-left: 10%;
135
+
136
+ margin-right: 10%;
137
+ }
138
+ pre {
139
+ color: white;
140
+ font-size: 0.9em;
141
+ padding: 2em 1em;
142
+ }
143
+
144
+ @media screen and (max-width: 1000px) {
145
+ .demo-container {
146
+ flex-direction: column;
147
+ margin: 2em;
148
+ }
149
+ .demo-name {
150
+ flex-direction: column;
151
+ }
152
+ .demo-text {
153
+ margin-right: 0vw;
154
+ margin-left: 0;
155
+ /* font-size: 1.5em; */
156
+ }
157
+ .demo-code {
158
+ margin-left: 0;
159
+ font-size: 0.8em;
160
+ height: 0;
161
+
162
+ height: 0;
163
+ width: fit-content;
164
+ }
165
+ .demo-container:hover .demo-text {
166
+ margin-left: 0vw;
167
+ margin-bottom: 1em;
168
+
169
+ margin-left: 0vw;
170
+ width: fit-content;
171
+ }
172
+ .demo-container:hover .demo-code {
173
+ opacity: 1;
174
+ min-height: 25%;
175
+ height: 14em;
176
+ margin-top: 0;
177
+ overflow-y: scroll;
178
+ width: auto;
179
+ }
180
+ .demo-code::-webkit-scrollbar {
181
+ width: 0.5em;
182
+ }
183
+ }
184
+
185
+ .fix {
186
+ position: fixed;
187
+ display: flex;
188
+ flex-direction: column;
189
+ align-items: center;
190
+ justify-content: center;
191
+
192
+ width: 100%;
193
+ height: 100%;
194
+ z-index: 100;
195
+ }
196
+
197
+ .fix-element {
198
+ width: 100px;
199
+ height: 100px;
200
+ background-color: rgb(41, 41, 41);
201
+ font-size: 7px;
202
+ text-align: center;
203
+ display: flex;
204
+ align-items: center;
205
+ justify-content: center;
206
+ flex-direction: column;
207
+ border: 2px solid white;
208
+ padding: 1vw;
209
+ }
210
+
211
+ .fix-ele {
212
+ width: 100px;
213
+ height: 100px;
214
+ border-radius: 50%;
215
+ background-color: aqua;
216
+ }
package/package.json ADDED
@@ -0,0 +1,31 @@
1
+ {
2
+ "name": "jos-animation",
3
+ "version": "0.8.0",
4
+ "description": "An animation library package to instantly add beautiful/professional looking animation to your website",
5
+ "author": "jesvijonathan",
6
+ "main": "./dist/jos.js",
7
+ "repository": {
8
+ "type": "git",
9
+ "url": "git+https://github.com/jesvijonathan/JOS-Animation-Library.git"
10
+ },
11
+ "keywords": [
12
+ "jos",
13
+ "on-scroll",
14
+ "animation",
15
+ "library",
16
+ "package",
17
+ "jesvi",
18
+ "uikit",
19
+ "javascript",
20
+ "lightweight",
21
+ "performance",
22
+ "scroll",
23
+ "event",
24
+ "css"
25
+ ],
26
+ "license": "MIT",
27
+ "bugs": {
28
+ "url": "https://github.com/jesvijonathan/JOS-Animation-Library/issues"
29
+ },
30
+ "homepage": "https://github.com/jesvijonathan/JOS-Animation-Library#readme"
31
+ }
package/res/7ygwKRQc_2x.jpg ADDED
Binary file
package/res/NewvWJ8Z_2x.jpg ADDED
Binary file
package/res/asdsad.jpg ADDED
Binary file
package/res/cPowTYfI_2x.jpg ADDED
Binary file
package/res/favicon.ico ADDED
Binary file
package/res/logo.jpg ADDED
Binary file
package/res/logo_1_sq.png ADDED
Binary file
package/res/logo_1png.png ADDED
Binary file
package/res/logo_2-removebg-preview.png ADDED
Binary file
package/res/logo_2.png ADDED
Binary file
package/res/logo_2_sq.png ADDED
Binary file