jos-animation 0.8.7-beta.1 → 0.8.8
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/README.md +3 -3
- package/dev/jos.css +11 -8
- package/dev/jos.js +6 -9
- package/dist/jos.css +1 -1
- package/dist/jos.debug.js +148 -36
- package/dist/jos.js +123 -45
- package/dist/jos.min.js +1 -1
- package/package.json +3 -2
- package/dev/scroll.js +0 -18
package/README.md
CHANGED
|
@@ -64,7 +64,7 @@ Feel free to report an issue or request a feature in this repository :)
|
|
|
64
64
|
<br>
|
|
65
65
|
<br>
|
|
66
66
|
|
|
67
|
-
<code> <i>JOS</i> </code> <code> <i>v0.8</i> </code> <code><i>
|
|
67
|
+
<code> <i>JOS</i> </code> <code> <i>v0.8.8</i> </code> <code><i> 18 July 2023</i></code> <code> <i>Jesvi Jonathan</i> </code>
|
|
68
68
|
|
|
69
69
|
<br>
|
|
70
70
|
|
|
@@ -78,7 +78,7 @@ Feel free to report an issue or request a feature in this repository :)
|
|
|
78
78
|
1. Add the <code>[\<link>](https://github.com/jesvijonathan/Jesvi-Bot/releases)</code> inside the <code>\<head></code> tag :
|
|
79
79
|
|
|
80
80
|
<!-- https://unpkg.com/jos-animation@latest/dist/jos.js -->
|
|
81
|
-
<!-- "https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dist/v0.8/jos.css" -->
|
|
81
|
+
<!-- "https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dist/v0.8.8/jos.css" -->
|
|
82
82
|
|
|
83
83
|
```html
|
|
84
84
|
<link
|
|
@@ -91,7 +91,7 @@ Feel free to report an issue or request a feature in this repository :)
|
|
|
91
91
|
|
|
92
92
|
2. Add the <code>[\<script>](https://github.com/jesvijonathan/Jesvi-Bot/releases)</code> right after the <code>\<body></code> tag :
|
|
93
93
|
<!-- For easier navigation use jsdelivr -->
|
|
94
|
-
<!-- https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dist/v0.8/jos.min.js -->
|
|
94
|
+
<!-- https://cdn.jsdelivr.net/gh/jesvijonathan/JOS-Animation-Library/dist/v0.8.8/jos.min.js -->
|
|
95
95
|
<!-- For Stablility use unpkg -->
|
|
96
96
|
<!-- https://unpkg.com/jos-animation@latest/dist/jos.js -->
|
|
97
97
|
|
package/dev/jos.css
CHANGED
|
@@ -1,15 +1,17 @@
|
|
|
1
1
|
/*
|
|
2
|
-
JOS v0.8.
|
|
2
|
+
JOS v0.8.8 By Jesvi Jonathan
|
|
3
3
|
*/
|
|
4
4
|
|
|
5
5
|
/* jos default */
|
|
6
6
|
.jos {
|
|
7
|
-
/* opacity: 1
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
/* transition:
|
|
12
|
-
transition-
|
|
7
|
+
/* opacity: 1;*/
|
|
8
|
+
/* transition: opacity 0.4s, transform 0.4s; */
|
|
9
|
+
transition: all 0.4s ease-in-out;
|
|
10
|
+
display: block;
|
|
11
|
+
/* transition-timing-function: ease-in-out;
|
|
12
|
+
transition-property: all;
|
|
13
|
+
transition-delay: 0;
|
|
14
|
+
transition-duration: 0.4s; */
|
|
13
15
|
}
|
|
14
16
|
/* .jos:not([class]):not([class*="display"]):not(:has([class*="display"])) {
|
|
15
17
|
display: block;
|
|
@@ -17,7 +19,8 @@ JOS v0.8.4 By Jesvi Jonathan
|
|
|
17
19
|
|
|
18
20
|
.jos-anchor {
|
|
19
21
|
opacity: 0;
|
|
20
|
-
transition: opacity 0.4s, transform 0.4s;
|
|
22
|
+
/* transition: opacity 0.4s, transform 0.4s; */
|
|
23
|
+
transition: all 0.4s ease-in-out;
|
|
21
24
|
transition-timing-function: ease-in-out;
|
|
22
25
|
}
|
|
23
26
|
.jos-static {
|
package/dev/jos.js
CHANGED
|
@@ -16,7 +16,7 @@ class jos {
|
|
|
16
16
|
debug = false;
|
|
17
17
|
disable = false;
|
|
18
18
|
|
|
19
|
-
static version = "0.8.
|
|
19
|
+
static version = "0.8.8 (Development)";
|
|
20
20
|
static author = "Jesvi Jonathan";
|
|
21
21
|
static github = "https://github.com/jesvijonathan/JOS-Animation-Library";
|
|
22
22
|
|
|
@@ -383,21 +383,18 @@ class jos {
|
|
|
383
383
|
styleSheet.insertRule(
|
|
384
384
|
".jos-no-mirror" + " { transition: 0s forwards !important;}"
|
|
385
385
|
);
|
|
386
|
-
|
|
386
|
+
//opacity " + s + ", transform
|
|
387
|
+
let property = "all ";
|
|
387
388
|
let s =
|
|
389
|
+
property +
|
|
388
390
|
this.default_duration +
|
|
389
391
|
"s " +
|
|
390
392
|
this.default_timingFunction +
|
|
391
393
|
" " +
|
|
392
394
|
this.default_delay +
|
|
393
|
-
"s";
|
|
395
|
+
"s ;";
|
|
394
396
|
|
|
395
|
-
styleSheet.insertRule(
|
|
396
|
-
".jos {" +
|
|
397
|
-
("transition: opacity " + s + ", transform " + s) +
|
|
398
|
-
"display: block;" +
|
|
399
|
-
"}"
|
|
400
|
-
);
|
|
397
|
+
styleSheet.insertRule(".jos {" + ("transition: " + s) + ";}");
|
|
401
398
|
|
|
402
399
|
this.jos_stylesheet = styleSheet;
|
|
403
400
|
}
|
package/dist/jos.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.jos,.jos-anchor{transition
|
|
1
|
+
.jos,.jos-anchor{transition:.4s ease-in-out}.jos{display:block}.jos-anchor{opacity:0}.jos-static{transform:translate(0,0);opacity:1}.jos-no-transition{transition-timing-function:linear;transition-duration:0s}.jos-fade{opacity:0}.jos-fade-right{opacity:0;transform:translateX(-100px)}.jos-fade-left{opacity:0;transform:translateX(100px)}.jos-fade-up{opacity:0;transform:translateY(50px)}.jos-fade-down{opacity:0;transform:translateY(-50px)}.jos-fade-right-up{opacity:0;transform:translateX(-100px) translateY(50px)}.jos-fade-right-down{opacity:0;transform:translateX(-100px) translateY(-50px)}.jos-fade-left-up{opacity:0;transform:translateX(100px) translateY(50px)}.jos-fade-left-down{opacity:0;transform:translateX(100px) translateY(-50px)}.jos-slide,.jos-slide-right{transform:translateX(-100px)}.jos-slide-left{transform:translateX(100px)}.jos-slide-up{transform:translateY(100px)}.jos-slide-down{transform:translateY(-100px)}.jos-slide-right-up{transform:translateX(-100px) translateY(100px)}.jos-slide-right-down{transform:translateX(-100px) translateY(-100px)}.jos-slide-left-up{transform:translateX(100px) translateY(100px)}.jos-slide-left-down{transform:translateX(100px) translateY(-100px)}.jos-zoom,.jos-zoom-out{opacity:0;transform:scale(.8)}.jos-zoom-out-right,.jos-zoom-right{opacity:0;transform:scale(.8) translate3d(-100px,0,-100px)}.jos-zoom-left,.jos-zoom-out-left{opacity:0;transform:scale(.8) translate3d(100px,0,-100px)}.jos-zoom-down,.jos-zoom-out-down{opacity:0;transform:scale(.8) translate3d(0,-100px,0)}.jos-zoom-out-up,.jos-zoom-up{opacity:0;transform:scale(.8) translate3d(0,100px,0)}.jos-grow{transform:scale(0)}.jos-grow-right{transform:scale(0) translate3d(-100px,0,-100px)}.jos-grow-left{transform:scale(0) translate3d(100px,0,-100px)}.jos-grow-down{transform:scale(0) translate3d(0,-100px,0)}.jos-grow-up{transform:scale(0) translate3d(0,100px,0)}.jos-zoom-in{opacity:0;transform:scale(1.1)}.jos-zoom-in-down{opacity:0;transform:scale(1.1) translate3d(0,-100px,0)}.jos-zoom-in-up{opacity:0;transform:scale(1.1) translate3d(0,100px,0)}.jos-zoom-in-right{opacity:0;transform:scale(1.1) translate3d(-100px,0,-100px)}.jos-zoom-in-left{opacity:0;transform:scale(1.1) translate3d(100px,0,-100px)}.jos-shrink{transform:scale(1.4)}.jos-shrink-right{transform:scale(1.4) translate3d(-100px,0,-100px)}.jos-shrink-left{transform:scale(1.4) translate3d(100px,0,-100px)}.jos-shrink-down{transform:scale(1.4) translate3d(0,-100px,0)}.jos-shrink-up{transform:scale(1.4) translate3d(0,100px,0)}.jos-flip,.jos-flip-right{transform:perspective(2500px) rotateY(-100deg);opacity:0}.jos-flip-left{transform:perspective(2500px) rotateY(100deg);opacity:0}.jos-flip-up{opacity:0;transform:perspective(2500px) rotateX(-100deg)}.jos-flip-down{opacity:0;transform:perspective(2500px) rotateX(100deg)}.jos-rotate,.jos-rotate-right{opacity:0;transform:rotate(-180deg)}.jos-rotate-left{opacity:0;transform:rotate(180deg)}.jos-spin,.jos-spin-right{opacity:0;transform:rotate(-180deg) scale(0)}.jos-spin-left{opacity:0;transform:rotate(180deg) scale(0)}.jos-revolve,.jos-revolve-right{opacity:0;transform:rotate(-360deg) scale(0)}.jos-revolve-left{opacity:0;transform:rotate(360deg) scale(0)}.jos-stretch{opacity:0;transform:scaleX(0)}.jos-stretch-vertical{opacity:0;transform:scaleY(0)}[data-jos_timing_function=ease]{transition-timing-function:ease!important}[data-jos_timing_function=ease-in]{transition-timing-function:ease-in!important}[data-jos_timing_function=ease-out]{transition-timing-function:ease-out!important}[data-jos_timing_function=ease-in-out]{transition-timing-function:ease-in-out!important}[data-jos_timing_function=linear]{transition-timing-function:linear!important}[data-jos_timing_function=cubic-bezier]{transition-timing-function:cubic-bezier(0.1,0.7,1,0.1)!important}[data-jos_timing_function=step-start]{transition-timing-function:step-start!important}[data-jos_timing_function=step-end]{transition-timing-function:step-end!important}[data-jos_timing_function=steps]{transition-timing-function:steps(5,end)!important}[data-jos_timing_function=frames]{transition-timing-function:frames(5)!important}[data-jos_timing_function=initial]{transition-timing-function:initial!important}[data-jos_timing_function=inherit]{transition-timing-function:inherit!important}[data-jos_timing_function=unset]{transition-timing-function:unset!important}[data-jos_duration="0"]{transition-duration:0s!important}[data-jos_duration="0.1"]{transition-duration:.1s!important}[data-jos_duration="0.2"]{transition-duration:.2s!important}[data-jos_duration="0.3"]{transition-duration:.3s!important}[data-jos_duration="0.4"]{transition-duration:.4s!important}[data-jos_duration="0.5"]{transition-duration:.5s!important}[data-jos_duration="0.6"]{transition-duration:.6s!important}[data-jos_duration="0.7"]{transition-duration:.7s!important}[data-jos_duration="0.8"]{transition-duration:.8s!important}[data-jos_duration="0.9"]{transition-duration:.9s!important}[data-jos_duration="1"],[data-jos_duration="6"]{transition-duration:1s!important}[data-jos_duration="2"],[data-jos_duration="7"]{transition-duration:2s!important}[data-jos_duration="3"],[data-jos_duration="8"]{transition-duration:3s!important}[data-jos_duration="4"],[data-jos_duration="9"]{transition-duration:4s!important}[data-jos_duration="10"],[data-jos_duration="5"]{transition:5s!important}[data-jos_delay="0"]{transition-delay:0s!important}[data-jos_delay="0.1"]{transition-delay:0.1s!important}[data-jos_delay="0.2"]{transition-delay:0.2s!important}[data-jos_delay="0.3"]{transition-delay:0.3s!important}[data-jos_delay="0.4"]{transition-delay:0.4s!important}[data-jos_delay="0.5"]{transition-delay:0.5s!important}[data-jos_delay="0.6"]{transition-delay:0.6s!important}[data-jos_delay="0.7"]{transition-delay:0.7s!important}[data-jos_delay="0.8"]{transition-delay:0.8s!important}[data-jos_delay="0.9"]{transition-delay:0.9s!important}[data-jos_delay="1"]{transition-delay:1s!important}[data-jos_delay="2"]{transition-delay:2s!important}[data-jos_delay="3"]{transition-delay:3s!important}[data-jos_delay="4"]{transition-delay:4s!important}[data-jos_delay="5"]{transition-delay:5s!important}.jos-slide-horizontal-play,.jos-slide-play{transition:1s;animation:.7s ease-in-out infinite alternate-reverse jos-slide-play}@keyframes jos-slide-play{0%{transform:translateX(-100px)}100%{transform:translateX(100px)}}.jos-slide-vertical-play{animation:.7s ease-in-out infinite alternate-reverse jos-slide-vertical-play}@keyframes jos-slide-vertical-play{0%{transform:translateY(-100px)}100%{transform:translateY(100px)}}.jos-pulse-play,.jos-zoom-in-play{animation:1s infinite alternate jos-zoom-in-play}@keyframes jos-zoom-in-play{0%{transform:scale(1);opacity:0}100%{opacity:1;transform:scale(.8)}}.jos-pulse-out-play,.jos-zoom-out-play,.jos-zoom-play{animation:.5s linear infinite alternate jos-zoom-play}@keyframes jos-zoom-play{0%{transform:scale(1);opacity:0}100%{opacity:1;transform:scale(1.1)}}.jos-flip-play{animation:.7s infinite alternate jos-flip-play}@keyframes jos-flip-play{0%{transform:rotateY(0)}100%{transform:rotateY(180deg)}}.jos-rotate-play{animation:1s linear infinite alternate-reverse forwards jos-rotate-play;border-radius:0}@keyframes jos-rotate-play{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.jos-spin-play{animation:1.5s infinite alternate jos-spin-play}@keyframes jos-spin-play{0%{transform:rotate(0);opacity:0}100%{transform:rotate(360deg);opacity:1}}.jos-revolve-play{animation:1.5s infinite alternate jos-revolve-play}@keyframes jos-revolve-play{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}.jos-grow-play,.jos-shrink-play{animation:1s infinite alternate jos-grow-play}@keyframes jos-grow-play{0%{transform:scale(0)}100%{transform:scale(1)}}.jos-shrink-play{animation-direction:alternate-reverse}.jos-stretch-play{animation:.7s infinite alternate jos-stretch-play}@keyframes jos-stretch-play{0%{transform:scaleX(1)}100%{transform:scaleX(0)}}.jos-stretch-vertical-play{animation:.7s infinite alternate-reverse jos-stretch-vertical-play}@keyframes jos-stretch-vertical-play{0%{transform:scaleY(1)}100%{transform:scaleY(0)}}.jos-fade-play{animation:.8s infinite alternate jos-fade-play}@keyframes jos-fade-play{0%{opacity:0}100%{opacity:1}}.jos-fade-horizontal-play{animation:1s infinite alternate-reverse jos-fade-horizontal-play}@keyframes jos-fade-horizontal-play{0%{opacity:0;transform:translateX(100px)}100%{opacity:1;transform:translateX(-100px)}}.jos-fade-vertical-play{animation:1s infinite alternate-reverse jos-fade-vertical-play}@keyframes jos-fade-vertical-play{0%{opacity:0;transform:translateY(100px)}100%{opacity:1;transform:translateY(-100px)}}.jos-blink-play{animation:1s steps(1,end) infinite jos-blink-play}@keyframes jos-blink-play{0%{opacity:1}50%{opacity:0}} /* JOS By Jesvi Jonathan*/
|
package/dist/jos.debug.js
CHANGED
|
@@ -11,11 +11,12 @@ class jos {
|
|
|
11
11
|
default_startVisible = undefined;
|
|
12
12
|
default_scrolldirection = undefined;
|
|
13
13
|
default_passive = true;
|
|
14
|
+
default_mirror = undefined;
|
|
14
15
|
|
|
15
16
|
debug = false;
|
|
16
17
|
disable = false;
|
|
17
18
|
|
|
18
|
-
static version = "0.8.
|
|
19
|
+
static version = "0.8.8 (Debug)";
|
|
19
20
|
static author = "Jesvi Jonathan";
|
|
20
21
|
static github = "https://github.com/jesvijonathan/JOS-Animation-Library";
|
|
21
22
|
|
|
@@ -23,6 +24,7 @@ class jos {
|
|
|
23
24
|
jos_stylesheet = undefined;
|
|
24
25
|
boxes = undefined;
|
|
25
26
|
observers = [];
|
|
27
|
+
scrollEnter = [];
|
|
26
28
|
|
|
27
29
|
constructor() {}
|
|
28
30
|
|
|
@@ -37,19 +39,19 @@ class jos {
|
|
|
37
39
|
if (type == 0 && this.debugMode) {
|
|
38
40
|
this.version();
|
|
39
41
|
console.log(`JOS Settings:
|
|
40
|
-
- animation: ${this.default_animation}
|
|
41
|
-
- once: ${this.default_once}
|
|
42
|
-
- animationinverse: ${this.default_animationinverse}
|
|
43
|
-
- timingFunction: ${this.default_timingFunction}
|
|
44
|
-
- duration: ${this.default_duration}
|
|
45
|
-
- delay: ${this.default_delay}
|
|
46
|
-
- threshold: ${this.default_threshold}
|
|
47
|
-
- startVisible: ${this.default_startVisible}
|
|
48
|
-
- scrolldirection: ${this.default_scrolldirection}
|
|
49
|
-
- intersectionRatio: ${this.default_intersectionRatio}
|
|
50
|
-
- rootMargin: ${this.default_rootMargin}
|
|
51
|
-
- disable: ${this.disable}
|
|
52
|
-
- debugMode: ${this.debugMode}\n`);
|
|
42
|
+
- animation: ${this.default_animation}
|
|
43
|
+
- once: ${this.default_once}
|
|
44
|
+
- animationinverse: ${this.default_animationinverse}
|
|
45
|
+
- timingFunction: ${this.default_timingFunction}
|
|
46
|
+
- duration: ${this.default_duration}
|
|
47
|
+
- delay: ${this.default_delay}
|
|
48
|
+
- threshold: ${this.default_threshold}
|
|
49
|
+
- startVisible: ${this.default_startVisible}
|
|
50
|
+
- scrolldirection: ${this.default_scrolldirection}
|
|
51
|
+
- intersectionRatio: ${this.default_intersectionRatio}
|
|
52
|
+
- rootMargin: ${this.default_rootMargin}
|
|
53
|
+
- disable: ${this.disable}
|
|
54
|
+
- debugMode: ${this.debugMode}\n`);
|
|
53
55
|
}
|
|
54
56
|
console.log("JOS Initialized:\n\n");
|
|
55
57
|
if ((type == 1 || type == 0) && this.debugMode) {
|
|
@@ -108,6 +110,62 @@ class jos {
|
|
|
108
110
|
});
|
|
109
111
|
};
|
|
110
112
|
|
|
113
|
+
// var box = target;
|
|
114
|
+
// console.log(box);
|
|
115
|
+
// const rootmargin = " 0% 0% -30% 0%";
|
|
116
|
+
callbackScroller = (scl) => {
|
|
117
|
+
const defaultRootMargin = this.default_rootMargin;
|
|
118
|
+
let wh = window.innerHeight;
|
|
119
|
+
|
|
120
|
+
const updateBox = (box) => {
|
|
121
|
+
const rootMargin = box.dataset.jos_rootmargin || defaultRootMargin;
|
|
122
|
+
const rootMarginValues = rootMargin.split(" ").map(parseFloat);
|
|
123
|
+
const topMargin = (wh * rootMarginValues[0]) / 100;
|
|
124
|
+
const bottomMargin = (wh * rootMarginValues[2]) / 100;
|
|
125
|
+
|
|
126
|
+
box.jos = {
|
|
127
|
+
rootMargin,
|
|
128
|
+
rootMarginValues,
|
|
129
|
+
topMargin,
|
|
130
|
+
bottomMargin,
|
|
131
|
+
};
|
|
132
|
+
const elementRect = box.getBoundingClientRect();
|
|
133
|
+
const elementTop = elementRect.top - box.jos.topMargin;
|
|
134
|
+
const elementBottom = elementRect.bottom - box.jos.bottomMargin;
|
|
135
|
+
|
|
136
|
+
const windowScrollProgress = elementRect.top / wh;
|
|
137
|
+
|
|
138
|
+
const rootScrollProgress =
|
|
139
|
+
elementTop / (wh - box.jos.topMargin - box.jos.bottomMargin);
|
|
140
|
+
|
|
141
|
+
let scrollProgress = 0;
|
|
142
|
+
|
|
143
|
+
if (rootScrollProgress < 0) {
|
|
144
|
+
scrollProgress = 0;
|
|
145
|
+
} else if (rootScrollProgress > 100) {
|
|
146
|
+
scrollProgress = 1;
|
|
147
|
+
} else {
|
|
148
|
+
scrollProgress = rootScrollProgress;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
box.jos = {
|
|
152
|
+
elementRect,
|
|
153
|
+
elementTop,
|
|
154
|
+
elementBottom,
|
|
155
|
+
windowScrollProgress,
|
|
156
|
+
rootScrollProgress,
|
|
157
|
+
scrollProgress,
|
|
158
|
+
};
|
|
159
|
+
|
|
160
|
+
window[box.dataset.jos_scroll](box);
|
|
161
|
+
};
|
|
162
|
+
|
|
163
|
+
document.onscroll = (e) => {
|
|
164
|
+
scl.forEach(updateBox);
|
|
165
|
+
};
|
|
166
|
+
};
|
|
167
|
+
|
|
168
|
+
// window["jos_scroll_" + box.id](obj);
|
|
111
169
|
callbackRouter = (entries, observer, type = 1) => {
|
|
112
170
|
if (this.disable == true) {
|
|
113
171
|
return;
|
|
@@ -116,18 +174,31 @@ class jos {
|
|
|
116
174
|
let target = entry.target;
|
|
117
175
|
let target_jos_animation = target.dataset.jos_animation;
|
|
118
176
|
let target_jos_animationinverse = target.dataset.jos_animationinverse;
|
|
177
|
+
|
|
119
178
|
let scroll_dir = 1;
|
|
120
179
|
if (entry.boundingClientRect.top < 0) {
|
|
121
180
|
scroll_dir = 0;
|
|
122
181
|
} else {
|
|
123
182
|
scroll_dir = 1;
|
|
124
183
|
}
|
|
184
|
+
|
|
125
185
|
if (entry.isIntersecting) {
|
|
186
|
+
if (
|
|
187
|
+
target.dataset.jos_scroll != "false" &&
|
|
188
|
+
target.dataset.jos_scroll != undefined
|
|
189
|
+
) {
|
|
190
|
+
this.scrollEnter.push(target);
|
|
191
|
+
this.callbackScroller(this.scrollEnter);
|
|
192
|
+
}
|
|
193
|
+
|
|
126
194
|
if (target.dataset.jos_counter != undefined) {
|
|
127
195
|
let counter_value = parseInt(target.dataset.jos_counter);
|
|
128
196
|
counter_value++;
|
|
129
197
|
target.dataset.jos_counter = counter_value;
|
|
130
198
|
}
|
|
199
|
+
if (target.dataset.jos_mirror == "false") {
|
|
200
|
+
target.classList.remove("jos-no-mirror");
|
|
201
|
+
}
|
|
131
202
|
if (target_jos_animation) {
|
|
132
203
|
target.classList.remove("jos-" + target_jos_animation);
|
|
133
204
|
if (target.dataset.jos_invoke != undefined) {
|
|
@@ -154,6 +225,11 @@ class jos {
|
|
|
154
225
|
(scroll_dir === 0 && target.dataset.jos_scrolldirection === "up") ||
|
|
155
226
|
target.dataset.jos_scrolldirection === "none"
|
|
156
227
|
) {
|
|
228
|
+
target.classList.toggle(
|
|
229
|
+
"jos-no-mirror",
|
|
230
|
+
target.dataset.jos_mirror == "false"
|
|
231
|
+
);
|
|
232
|
+
|
|
157
233
|
target.classList.add("jos-" + target_jos_animation);
|
|
158
234
|
if (target_jos_animationinverse != undefined) {
|
|
159
235
|
target.classList.remove("jos-" + target_jos_animationinverse);
|
|
@@ -162,6 +238,15 @@ class jos {
|
|
|
162
238
|
window[target.dataset.jos_invoke_out](target);
|
|
163
239
|
}
|
|
164
240
|
}
|
|
241
|
+
if (
|
|
242
|
+
target.dataset.jos_scroll != "false" &&
|
|
243
|
+
target.dataset.jos_scroll != undefined
|
|
244
|
+
) {
|
|
245
|
+
this.scrollEnter = this.scrollEnter.filter(
|
|
246
|
+
(item) => item.id !== target.id
|
|
247
|
+
);
|
|
248
|
+
this.callbackScroller(this.scrollEnter);
|
|
249
|
+
}
|
|
165
250
|
}
|
|
166
251
|
};
|
|
167
252
|
|
|
@@ -175,6 +260,7 @@ class jos {
|
|
|
175
260
|
let object_default_timingFunction = box.dataset.jos_timingFunction;
|
|
176
261
|
let object_default_duration = box.dataset.jos_duration;
|
|
177
262
|
let object_default_delay = box.dataset.jos_delay;
|
|
263
|
+
let object_default_mirror = box.dataset.jos_mirror || this.default_mirror;
|
|
178
264
|
if (box.classList.contains("jos_disabled")) {
|
|
179
265
|
box.classList.remove("jos_disabled");
|
|
180
266
|
box.classList.add("jos");
|
|
@@ -200,6 +286,10 @@ class jos {
|
|
|
200
286
|
object_default_timingFunction
|
|
201
287
|
);
|
|
202
288
|
}
|
|
289
|
+
|
|
290
|
+
if (object_default_mirror == "false") {
|
|
291
|
+
box.setAttribute("data-jos_mirror", object_default_mirror);
|
|
292
|
+
}
|
|
203
293
|
if (object_default_duration) {
|
|
204
294
|
box.setAttribute("data-jos_duration", object_default_duration);
|
|
205
295
|
}
|
|
@@ -219,13 +309,21 @@ class jos {
|
|
|
219
309
|
}
|
|
220
310
|
let rootMargin = [
|
|
221
311
|
box.dataset.jos_rootmargin_top || this.default_rootMargin.split(" ")[0],
|
|
222
|
-
box.dataset.
|
|
223
|
-
this.default_rootMargin.split(" ")[
|
|
312
|
+
box.dataset.jos_rootmargin_right ||
|
|
313
|
+
this.default_rootMargin.split(" ")[1],
|
|
224
314
|
box.dataset.jos_rootmargin_bottom ||
|
|
225
315
|
this.default_rootMargin.split(" ")[2],
|
|
226
316
|
box.dataset.jos_rootmargin_left ||
|
|
227
|
-
this.default_rootMargin.split(" ")[
|
|
228
|
-
]
|
|
317
|
+
this.default_rootMargin.split(" ")[3],
|
|
318
|
+
]
|
|
319
|
+
.map((value) => {
|
|
320
|
+
const isNegative = value.startsWith("-");
|
|
321
|
+
return isNegative ? value.substring(1) : `-${value}`;
|
|
322
|
+
})
|
|
323
|
+
.join(" ");
|
|
324
|
+
|
|
325
|
+
// let rootMargin = " 10% 0% -30% 0%";
|
|
326
|
+
|
|
229
327
|
let box_observer = {
|
|
230
328
|
rootMargin,
|
|
231
329
|
threshold: this.default_threshold,
|
|
@@ -277,22 +375,30 @@ class jos {
|
|
|
277
375
|
this.observers?.forEach((observer) => observer.disconnect());
|
|
278
376
|
}
|
|
279
377
|
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
|
|
287
|
-
this.default_duration +
|
|
288
|
-
"s " +
|
|
289
|
-
this.default_timingFunction +
|
|
290
|
-
" " +
|
|
291
|
-
this.default_delay +
|
|
292
|
-
"s !important;") +
|
|
293
|
-
"}"
|
|
378
|
+
getStylesheet() {
|
|
379
|
+
const styleElement = document.createElement("style");
|
|
380
|
+
document.head.appendChild(styleElement);
|
|
381
|
+
|
|
382
|
+
const styleSheet = styleElement.sheet;
|
|
383
|
+
styleSheet.insertRule(
|
|
384
|
+
".jos-no-mirror" + " { transition: 0s forwards !important;}"
|
|
294
385
|
);
|
|
295
|
-
|
|
386
|
+
//opacity " + s + ", transform
|
|
387
|
+
let property = "all ";
|
|
388
|
+
let s =
|
|
389
|
+
property +
|
|
390
|
+
this.default_duration +
|
|
391
|
+
"s " +
|
|
392
|
+
this.default_timingFunction +
|
|
393
|
+
" " +
|
|
394
|
+
this.default_delay +
|
|
395
|
+
"s ;";
|
|
396
|
+
|
|
397
|
+
styleSheet.insertRule(
|
|
398
|
+
".jos {" + ("transition: " + s) + ";}"
|
|
399
|
+
);
|
|
400
|
+
|
|
401
|
+
this.jos_stylesheet = styleSheet;
|
|
296
402
|
}
|
|
297
403
|
|
|
298
404
|
getBoxes() {
|
|
@@ -304,7 +410,7 @@ class jos {
|
|
|
304
410
|
return this.boxes;
|
|
305
411
|
}
|
|
306
412
|
|
|
307
|
-
|
|
413
|
+
getDefault(options = {}) {
|
|
308
414
|
let {
|
|
309
415
|
once,
|
|
310
416
|
animation,
|
|
@@ -315,6 +421,7 @@ class jos {
|
|
|
315
421
|
scrollDirection,
|
|
316
422
|
intersectionRatio,
|
|
317
423
|
duration,
|
|
424
|
+
mirror,
|
|
318
425
|
delay,
|
|
319
426
|
debugMode,
|
|
320
427
|
disable,
|
|
@@ -339,12 +446,13 @@ class jos {
|
|
|
339
446
|
this.default_rootMargin =
|
|
340
447
|
rootMargin ||
|
|
341
448
|
`${rootMarginTop || "-10%"} 0% ${rootMarginBottom || "-40%"} 0%`;
|
|
449
|
+
this.default_mirror = mirror || this.default_mirror;
|
|
342
450
|
}
|
|
343
451
|
|
|
344
452
|
init(options = this.options) {
|
|
345
453
|
this.options = options;
|
|
346
|
-
this.
|
|
347
|
-
this.
|
|
454
|
+
this.getDefault(options);
|
|
455
|
+
this.getStylesheet();
|
|
348
456
|
this.getBoxes();
|
|
349
457
|
if (this.debugMode) {
|
|
350
458
|
this.debugger();
|
|
@@ -411,4 +519,8 @@ class jos {
|
|
|
411
519
|
}
|
|
412
520
|
}
|
|
413
521
|
const JOS = new jos();
|
|
522
|
+
|
|
523
|
+
if (typeof module !== "undefined" && typeof module.exports !== "undefined") {
|
|
524
|
+
module.exports = JOS;
|
|
525
|
+
}
|
|
414
526
|
// By Jesvi Jonathan
|
package/dist/jos.js
CHANGED
|
@@ -11,15 +11,17 @@ class jos {
|
|
|
11
11
|
default_startVisible = void 0;
|
|
12
12
|
default_scrolldirection = void 0;
|
|
13
13
|
default_passive = !0;
|
|
14
|
+
default_mirror = void 0;
|
|
14
15
|
debug = !1;
|
|
15
16
|
disable = !1;
|
|
16
|
-
static version = "0.8.
|
|
17
|
+
static version = "0.8.8";
|
|
17
18
|
static author = "Jesvi Jonathan";
|
|
18
19
|
static github = "https://github.com/jesvijonathan/JOS-Animation-Library";
|
|
19
20
|
options = {};
|
|
20
21
|
jos_stylesheet = void 0;
|
|
21
22
|
boxes = void 0;
|
|
22
23
|
observers = [];
|
|
24
|
+
scrollEnter = [];
|
|
23
25
|
constructor() {}
|
|
24
26
|
version() {
|
|
25
27
|
console.log(
|
|
@@ -27,8 +29,16 @@ class jos {
|
|
|
27
29
|
);
|
|
28
30
|
}
|
|
29
31
|
debugger(type = 0) {
|
|
30
|
-
0 == type &&
|
|
31
|
-
|
|
32
|
+
0 == type &&
|
|
33
|
+
this.debugMode &&
|
|
34
|
+
(this.version(),
|
|
35
|
+
console.log(
|
|
36
|
+
`JOS Settings:\n - animation: ${this.default_animation}\n - once: ${this.default_once}\n - animationinverse: ${this.default_animationinverse}\n - timingFunction: ${this.default_timingFunction}\n - duration: ${this.default_duration}\n - delay: ${this.default_delay}\n - threshold: ${this.default_threshold}\n - startVisible: ${this.default_startVisible}\n - scrolldirection: ${this.default_scrolldirection}\n - intersectionRatio: ${this.default_intersectionRatio}\n - rootMargin: ${this.default_rootMargin}\n - disable: ${this.disable}\n - debugMode: ${this.debugMode}\n`
|
|
37
|
+
)),
|
|
38
|
+
console.log("JOS Initialized:\n\n"),
|
|
39
|
+
(1 != type && 0 != type) ||
|
|
40
|
+
!this.debugMode ||
|
|
41
|
+
console.log(this.boxes || "No Elements Found");
|
|
32
42
|
}
|
|
33
43
|
callbackRouter_anchor = (entries, observer) => {
|
|
34
44
|
let entry = entries[0],
|
|
@@ -63,6 +73,47 @@ class jos {
|
|
|
63
73
|
window[target.dataset.jos_invoke_out](target));
|
|
64
74
|
});
|
|
65
75
|
};
|
|
76
|
+
callbackScroller = (scl) => {
|
|
77
|
+
const defaultRootMargin = this.default_rootMargin;
|
|
78
|
+
let wh = window.innerHeight;
|
|
79
|
+
const updateBox = (box) => {
|
|
80
|
+
const rootMargin = box.dataset.jos_rootmargin || defaultRootMargin,
|
|
81
|
+
rootMarginValues = rootMargin.split(" ").map(parseFloat),
|
|
82
|
+
topMargin = (wh * rootMarginValues[0]) / 100,
|
|
83
|
+
bottomMargin = (wh * rootMarginValues[2]) / 100;
|
|
84
|
+
box.jos = {
|
|
85
|
+
rootMargin: rootMargin,
|
|
86
|
+
rootMarginValues: rootMarginValues,
|
|
87
|
+
topMargin: topMargin,
|
|
88
|
+
bottomMargin: bottomMargin,
|
|
89
|
+
};
|
|
90
|
+
const elementRect = box.getBoundingClientRect(),
|
|
91
|
+
elementTop = elementRect.top - box.jos.topMargin,
|
|
92
|
+
elementBottom = elementRect.bottom - box.jos.bottomMargin,
|
|
93
|
+
windowScrollProgress = elementRect.top / wh,
|
|
94
|
+
rootScrollProgress =
|
|
95
|
+
elementTop / (wh - box.jos.topMargin - box.jos.bottomMargin);
|
|
96
|
+
let scrollProgress = 0;
|
|
97
|
+
(scrollProgress =
|
|
98
|
+
rootScrollProgress < 0
|
|
99
|
+
? 0
|
|
100
|
+
: rootScrollProgress > 100
|
|
101
|
+
? 1
|
|
102
|
+
: rootScrollProgress),
|
|
103
|
+
(box.jos = {
|
|
104
|
+
elementRect: elementRect,
|
|
105
|
+
elementTop: elementTop,
|
|
106
|
+
elementBottom: elementBottom,
|
|
107
|
+
windowScrollProgress: windowScrollProgress,
|
|
108
|
+
rootScrollProgress: rootScrollProgress,
|
|
109
|
+
scrollProgress: scrollProgress,
|
|
110
|
+
}),
|
|
111
|
+
window[box.dataset.jos_scroll](box);
|
|
112
|
+
};
|
|
113
|
+
document.onscroll = (e) => {
|
|
114
|
+
scl.forEach(updateBox);
|
|
115
|
+
};
|
|
116
|
+
};
|
|
66
117
|
callbackRouter = (entries, observer, type = 1) => {
|
|
67
118
|
if (1 == this.disable) return;
|
|
68
119
|
let entry = entries[0],
|
|
@@ -74,19 +125,27 @@ class jos {
|
|
|
74
125
|
((scroll_dir = entry.boundingClientRect.top < 0 ? 0 : 1),
|
|
75
126
|
entry.isIntersecting)
|
|
76
127
|
) {
|
|
77
|
-
if (
|
|
128
|
+
if (
|
|
129
|
+
("false" != target.dataset.jos_scroll &&
|
|
130
|
+
null != target.dataset.jos_scroll &&
|
|
131
|
+
(this.scrollEnter.push(target),
|
|
132
|
+
this.callbackScroller(this.scrollEnter)),
|
|
133
|
+
null != target.dataset.jos_counter)
|
|
134
|
+
) {
|
|
78
135
|
let counter_value = parseInt(target.dataset.jos_counter);
|
|
79
136
|
counter_value++, (target.dataset.jos_counter = counter_value);
|
|
80
137
|
}
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
(
|
|
88
|
-
|
|
89
|
-
|
|
138
|
+
"false" == target.dataset.jos_mirror &&
|
|
139
|
+
target.classList.remove("jos-no-mirror"),
|
|
140
|
+
target_jos_animation &&
|
|
141
|
+
(target.classList.remove("jos-" + target_jos_animation),
|
|
142
|
+
null != target.dataset.jos_invoke &&
|
|
143
|
+
window[target.dataset.jos_invoke](target),
|
|
144
|
+
(null == target.dataset.jos_once &&
|
|
145
|
+
"false" == target.dataset.jos_once) ||
|
|
146
|
+
(("true" == target.dataset.jos_once ||
|
|
147
|
+
target.dataset.jos_counter >= target.dataset.jos_once) &&
|
|
148
|
+
observer.unobserve(target))),
|
|
90
149
|
null != target_jos_animationinverse &&
|
|
91
150
|
target.classList.add("jos-" + target_jos_animationinverse);
|
|
92
151
|
} else
|
|
@@ -94,11 +153,21 @@ class jos {
|
|
|
94
153
|
(1 === scroll_dir && "down" === target.dataset.jos_scrolldirection) ||
|
|
95
154
|
(0 === scroll_dir && "up" === target.dataset.jos_scrolldirection) ||
|
|
96
155
|
"none" === target.dataset.jos_scrolldirection) &&
|
|
97
|
-
(target.classList.
|
|
156
|
+
(target.classList.toggle(
|
|
157
|
+
"jos-no-mirror",
|
|
158
|
+
"false" == target.dataset.jos_mirror
|
|
159
|
+
),
|
|
160
|
+
target.classList.add("jos-" + target_jos_animation),
|
|
98
161
|
null != target_jos_animationinverse &&
|
|
99
162
|
target.classList.remove("jos-" + target_jos_animationinverse),
|
|
100
163
|
void 0 !== target.dataset.jos_invoke_out &&
|
|
101
|
-
window[target.dataset.jos_invoke_out](target))
|
|
164
|
+
window[target.dataset.jos_invoke_out](target)),
|
|
165
|
+
"false" != target.dataset.jos_scroll &&
|
|
166
|
+
null != target.dataset.jos_scroll &&
|
|
167
|
+
((this.scrollEnter = this.scrollEnter.filter(
|
|
168
|
+
(item) => item.id !== target.id
|
|
169
|
+
)),
|
|
170
|
+
this.callbackScroller(this.scrollEnter));
|
|
102
171
|
};
|
|
103
172
|
animationInit() {
|
|
104
173
|
let doit = [];
|
|
@@ -109,7 +178,8 @@ class jos {
|
|
|
109
178
|
object_default_animationinverse = box.dataset.jos_animationinverse,
|
|
110
179
|
object_default_timingFunction = box.dataset.jos_timingFunction,
|
|
111
180
|
object_default_duration = box.dataset.jos_duration,
|
|
112
|
-
object_default_delay = box.dataset.jos_delay
|
|
181
|
+
object_default_delay = box.dataset.jos_delay,
|
|
182
|
+
object_default_mirror = box.dataset.jos_mirror || this.default_mirror;
|
|
113
183
|
box.classList.contains("jos_disabled") &&
|
|
114
184
|
(box.classList.remove("jos_disabled"), box.classList.add("jos")),
|
|
115
185
|
object_default_once &&
|
|
@@ -130,6 +200,8 @@ class jos {
|
|
|
130
200
|
"data-jos_timingFunction",
|
|
131
201
|
object_default_timingFunction
|
|
132
202
|
),
|
|
203
|
+
"false" == object_default_mirror &&
|
|
204
|
+
box.setAttribute("data-jos_mirror", object_default_mirror),
|
|
133
205
|
object_default_duration &&
|
|
134
206
|
box.setAttribute("data-jos_duration", object_default_duration),
|
|
135
207
|
object_default_delay &&
|
|
@@ -147,13 +219,17 @@ class jos {
|
|
|
147
219
|
rootMargin: [
|
|
148
220
|
box.dataset.jos_rootmargin_top ||
|
|
149
221
|
this.default_rootMargin.split(" ")[0],
|
|
150
|
-
box.dataset.
|
|
151
|
-
this.default_rootMargin.split(" ")[
|
|
222
|
+
box.dataset.jos_rootmargin_right ||
|
|
223
|
+
this.default_rootMargin.split(" ")[1],
|
|
152
224
|
box.dataset.jos_rootmargin_bottom ||
|
|
153
225
|
this.default_rootMargin.split(" ")[2],
|
|
154
226
|
box.dataset.jos_rootmargin_left ||
|
|
155
|
-
this.default_rootMargin.split(" ")[
|
|
156
|
-
]
|
|
227
|
+
this.default_rootMargin.split(" ")[3],
|
|
228
|
+
]
|
|
229
|
+
.map((value) =>
|
|
230
|
+
value.startsWith("-") ? value.substring(1) : `-${value}`
|
|
231
|
+
)
|
|
232
|
+
.join(" "),
|
|
157
233
|
threshold: this.default_threshold,
|
|
158
234
|
passive: this.default_passive,
|
|
159
235
|
};
|
|
@@ -195,21 +271,23 @@ class jos {
|
|
|
195
271
|
}),
|
|
196
272
|
this.observers?.forEach((observer) => observer.disconnect());
|
|
197
273
|
}
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
this.default_duration +
|
|
205
|
-
"s " +
|
|
206
|
-
this.default_timingFunction +
|
|
207
|
-
" " +
|
|
208
|
-
this.default_delay +
|
|
209
|
-
"s !important;}"
|
|
210
|
-
),
|
|
211
|
-
this.jos_stylesheet
|
|
274
|
+
getStylesheet() {
|
|
275
|
+
const styleElement = document.createElement("style");
|
|
276
|
+
document.head.appendChild(styleElement);
|
|
277
|
+
const styleSheet = styleElement.sheet;
|
|
278
|
+
styleSheet.insertRule(
|
|
279
|
+
".jos-no-mirror { transition: 0s forwards !important;}"
|
|
212
280
|
);
|
|
281
|
+
let s =
|
|
282
|
+
"all " +
|
|
283
|
+
this.default_duration +
|
|
284
|
+
"s " +
|
|
285
|
+
this.default_timingFunction +
|
|
286
|
+
" " +
|
|
287
|
+
this.default_delay +
|
|
288
|
+
"s ;";
|
|
289
|
+
styleSheet.insertRule(".jos {transition: " + s + ";}"),
|
|
290
|
+
(this.jos_stylesheet = styleSheet);
|
|
213
291
|
}
|
|
214
292
|
getBoxes() {
|
|
215
293
|
return (
|
|
@@ -218,7 +296,7 @@ class jos {
|
|
|
218
296
|
this.boxes
|
|
219
297
|
);
|
|
220
298
|
}
|
|
221
|
-
|
|
299
|
+
getDefault(options = {}) {
|
|
222
300
|
let {
|
|
223
301
|
once: once,
|
|
224
302
|
animation: animation,
|
|
@@ -229,6 +307,7 @@ class jos {
|
|
|
229
307
|
scrollDirection: scrollDirection,
|
|
230
308
|
intersectionRatio: intersectionRatio,
|
|
231
309
|
duration: duration,
|
|
310
|
+
mirror: mirror,
|
|
232
311
|
delay: delay,
|
|
233
312
|
debugMode: debugMode,
|
|
234
313
|
disable: disable,
|
|
@@ -254,17 +333,15 @@ class jos {
|
|
|
254
333
|
(this.disable = disable || this.disable),
|
|
255
334
|
(this.default_rootMargin =
|
|
256
335
|
rootMargin ||
|
|
257
|
-
`${rootMarginTop || "-10%"} 0% ${rootMarginBottom || "-40%"} 0%`)
|
|
336
|
+
`${rootMarginTop || "-10%"} 0% ${rootMarginBottom || "-40%"} 0%`),
|
|
337
|
+
(this.default_mirror = mirror || this.default_mirror);
|
|
258
338
|
}
|
|
259
339
|
init(options = this.options) {
|
|
260
340
|
(this.options = options),
|
|
261
|
-
this.
|
|
262
|
-
this.
|
|
341
|
+
this.getDefault(options),
|
|
342
|
+
this.getStylesheet(),
|
|
263
343
|
this.getBoxes(),
|
|
264
|
-
this.debugMode &&
|
|
265
|
-
console.warn(
|
|
266
|
-
"JOS | This version of JOS package does not support debug mode, Please use jos.debug.js for debugging."
|
|
267
|
-
),
|
|
344
|
+
this.debugMode && this.debugger(),
|
|
268
345
|
this.disable ? this.stop() : this.start();
|
|
269
346
|
}
|
|
270
347
|
start(state = 0) {
|
|
@@ -306,6 +383,7 @@ class jos {
|
|
|
306
383
|
}
|
|
307
384
|
}
|
|
308
385
|
const JOS = new jos();
|
|
309
|
-
|
|
310
|
-
|
|
311
|
-
|
|
386
|
+
"undefined" != typeof module &&
|
|
387
|
+
void 0 !== module.exports &&
|
|
388
|
+
(module.exports = JOS);
|
|
389
|
+
// By Jesvi Jonathan
|
package/dist/jos.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
class jos{default_once=!1;default_animation="fade";default_animationinverse=void 0;default_timingFunction="ease-in-out";default_threshold=0;default_duration=.4;default_delay=0;default_intersectionRatio=0;default_rootMargin="-10% 0% -40% 0%";default_startVisible=void 0;default_scrolldirection=void 0;default_passive=!0;debug=!1;disable=!1;static version="0.8.
|
|
1
|
+
class jos{default_once=!1;default_animation="fade";default_animationinverse=void 0;default_timingFunction="ease-in-out";default_threshold=0;default_duration=.4;default_delay=0;default_intersectionRatio=0;default_rootMargin="-10% 0% -40% 0%";default_startVisible=void 0;default_scrolldirection=void 0;default_passive=!0;default_mirror=void 0;debug=!1;disable=!1;static version="0.8.8 (Minified)";static author="Jesvi Jonathan";static github="https://github.com/jesvijonathan/JOS-Animation-Library";options={};jos_stylesheet=void 0;boxes=void 0;observers=[];scrollEnter=[];constructor(){}version(){console.log(`JOS: Javascript On Scroll Animation Library\n - Version: ${jos.version}\n - Author: ${jos.author}\n - Github: ${jos.github}\n`)}debugger(t=0){0==t&&this.debugMode&&(this.version(),console.log(`JOS Settings:\n - animation: ${this.default_animation}\n - once: ${this.default_once}\n - animationinverse: ${this.default_animationinverse}\n - timingFunction: ${this.default_timingFunction}\n - duration: ${this.default_duration}\n - delay: ${this.default_delay}\n - threshold: ${this.default_threshold}\n - startVisible: ${this.default_startVisible}\n - scrolldirection: ${this.default_scrolldirection}\n - intersectionRatio: ${this.default_intersectionRatio}\n - rootMargin: ${this.default_rootMargin}\n - disable: ${this.disable}\n - debugMode: ${this.debugMode}\n`)),console.log("JOS Initialized:\n\n"),1!=t&&0!=t||!this.debugMode||console.log(this.boxes||"No Elements Found")}callbackRouter_anchor=(t,s)=>{let e=t[0],o=e.target;document.querySelectorAll("[data-jos_anchor='#"+o.id+"']").forEach((t=>{let o=t.dataset.jos_animation,i=t.dataset.jos_animationinverse;if(e.isIntersecting){if(null!=t.dataset.jos_counter){let s=parseInt(t.dataset.jos_counter);s++,t.dataset.jos_counter=s}o&&(t.classList.remove("jos-"+o),null!=t.dataset.jos_invoke&&window[t.dataset.jos_invoke](t),null==t.dataset.jos_once&&"false"==t.dataset.jos_once||("true"==t.dataset.jos_once||t.dataset.jos_counter>=t.dataset.jos_once)&&s.unobserve(t),null!=i&&t.classList.add("jos-"+i))}else void 0!==t.dataset.jos_scrolldirection&&"down"!==t.dataset.jos_scrolldirection&&"none"!==t.dataset.jos_scrolldirection||(t.classList.add("jos-"+o),void 0!==t.dataset.jos_invoke_out&&window[t.dataset.jos_invoke_out](t))}))};callbackScroller=t=>{const s=this.default_rootMargin;let e=window.innerHeight;const o=t=>{const o=t.dataset.jos_rootmargin||s,i=o.split(" ").map(parseFloat),a=e*i[0]/100,n=e*i[2]/100;t.jos={rootMargin:o,rootMarginValues:i,topMargin:a,bottomMargin:n};const r=t.getBoundingClientRect(),l=r.top-t.jos.topMargin,d=r.bottom-t.jos.bottomMargin,u=r.top/e,c=l/(e-t.jos.topMargin-t.jos.bottomMargin);let h=0;h=c<0?0:c>100?1:c,t.jos={elementRect:r,elementTop:l,elementBottom:d,windowScrollProgress:u,rootScrollProgress:c,scrollProgress:h},window[t.dataset.jos_scroll](t)};document.onscroll=s=>{t.forEach(o)}};callbackRouter=(t,s,e=1)=>{if(1==this.disable)return;let o=t[0],i=o.target,a=i.dataset.jos_animation,n=i.dataset.jos_animationinverse,r=1;if(r=o.boundingClientRect.top<0?0:1,o.isIntersecting){if("false"!=i.dataset.jos_scroll&&null!=i.dataset.jos_scroll&&(this.scrollEnter.push(i),this.callbackScroller(this.scrollEnter)),null!=i.dataset.jos_counter){let t=parseInt(i.dataset.jos_counter);t++,i.dataset.jos_counter=t}"false"==i.dataset.jos_mirror&&i.classList.remove("jos-no-mirror"),a&&(i.classList.remove("jos-"+a),null!=i.dataset.jos_invoke&&window[i.dataset.jos_invoke](i),null==i.dataset.jos_once&&"false"==i.dataset.jos_once||("true"==i.dataset.jos_once||i.dataset.jos_counter>=i.dataset.jos_once)&&s.unobserve(i)),null!=n&&i.classList.add("jos-"+n)}else(void 0===i.dataset.jos_scrolldirection||1===r&&"down"===i.dataset.jos_scrolldirection||0===r&&"up"===i.dataset.jos_scrolldirection||"none"===i.dataset.jos_scrolldirection)&&(i.classList.toggle("jos-no-mirror","false"==i.dataset.jos_mirror),i.classList.add("jos-"+a),null!=n&&i.classList.remove("jos-"+n),void 0!==i.dataset.jos_invoke_out&&window[i.dataset.jos_invoke_out](i)),"false"!=i.dataset.jos_scroll&&null!=i.dataset.jos_scroll&&(this.scrollEnter=this.scrollEnter.filter((t=>t.id!==i.id)),this.callbackScroller(this.scrollEnter))};animationInit(){let t=[];this.boxes.forEach((s=>{let e=s.dataset.jos_once,o=s.dataset.jos_animation||this.default_animation,i=s.dataset.jos_animationinverse,a=s.dataset.jos_timingFunction,n=s.dataset.jos_duration,r=s.dataset.jos_delay,l=s.dataset.jos_mirror||this.default_mirror;s.classList.contains("jos_disabled")&&(s.classList.remove("jos_disabled"),s.classList.add("jos")),e&&("true"==e||/^\d+$/.test(e))?s.setAttribute("data-jos_once",e):s.setAttribute("data-jos_once",this.default_once?"1":"false"),s.setAttribute("data-jos_animation",o),i&&s.setAttribute("data-jos_animationinverse",i),a&&s.setAttribute("data-jos_timingFunction",a),"false"==l&&s.setAttribute("data-jos_mirror",l),n&&s.setAttribute("data-jos_duration",n),r&&s.setAttribute("data-jos_delay",r),s.setAttribute("data-jos_counter","0"),s.classList.add("jos-"+o),(s.dataset.jos_startvisible||this.default_startVisible)&&t.push(s),this.default_scrolldirection&&s.setAttribute("data-jos_scrolldirection",this.default_scrolldirection);let d={rootMargin:[s.dataset.jos_rootmargin_top||this.default_rootMargin.split(" ")[0],s.dataset.jos_rootmargin_right||this.default_rootMargin.split(" ")[1],s.dataset.jos_rootmargin_bottom||this.default_rootMargin.split(" ")[2],s.dataset.jos_rootmargin_left||this.default_rootMargin.split(" ")[3]].map((t=>t.startsWith("-")?t.substring(1):`-${t}`)).join(" "),threshold:this.default_threshold,passive:this.default_passive};if(s.dataset.jos_anchor){const t=new IntersectionObserver(this.callbackRouter_anchor,d);this.observers.push(t),t.observe(document.getElementById(s.dataset.jos_anchor.substring(1)))}else{const t=new IntersectionObserver(this.callbackRouter,d);this.observers.push(t),t.observe(s)}})),setTimeout((()=>{t.forEach((t=>{let s=t.dataset.jos_startvisible;setTimeout((()=>{"true"==s&&(s=0),t.classList.remove("jos-"+t.dataset.jos_animation)}),s||this.default_startVisible)}))}),100)}animationUnset(t=0){-1!=t&&this.boxes?.forEach((s=>{s.classList.remove("jos"),s.classList.add("jos_disabled"),0==t?s.classList.add("jos-"+s.dataset.jos_animation):s.classList.remove("jos-"+s.dataset.jos_animation)})),this.observers?.forEach((t=>t.disconnect()))}getStylesheet(){const t=document.createElement("style");document.head.appendChild(t);const s=t.sheet;s.insertRule(".jos-no-mirror { transition: 0s forwards !important;}");let e="all "+this.default_duration+"s "+this.default_timingFunction+" "+this.default_delay+"s ;";s.insertRule(".jos {transition: "+e+";}"),this.jos_stylesheet=s}getBoxes(){return this.boxes=void 0,this.boxes||(this.boxes=document.querySelectorAll(".jos")),this.boxes}getDefault(t={}){let{once:s,animation:e,animationinverse:o,timingFunction:i,threshold:a,startVisible:n,scrollDirection:r,intersectionRatio:l,duration:d,mirror:u,delay:c,debugMode:h,disable:_,rootMargin:j,rootMarginTop:f,rootMarginBottom:m}=t;this.default_once=s||this.default_once,this.default_animation=e||this.default_animation,this.default_animationinverse=o||this.default_animation,this.default_timingFunction=i||this.default_timingFunction,this.default_threshold=a||this.default_threshold,this.default_startVisible=n||this.default_startVisible,this.default_scrolldirection=r||this.default_scrolldirection,this.default_intersectionRatio=l||this.default_threshold,this.default_duration=d||this.default_duration,this.default_delay=c||this.default_delay,this.debugMode=h||this.debugMode,this.disable=_||this.disable,this.default_rootMargin=j||`${f||"-10%"} 0% ${m||"-40%"} 0%`,this.default_mirror=u||this.default_mirror}init(t=this.options){this.options=t,this.getDefault(t),this.getStylesheet(),this.getBoxes(),this.debugMode&&this.debugger(),this.disable?this.stop():this.start()}start(t=0){return-1!=t&&(this.stop(),this.animationInit()),this.disable=!1,"Started"}stop(t=0){return 1==t?t=0:0==t&&(t=1),this.disable=!0,-1!=t&&this.animationUnset(t),"Stopped"}refresh(){return this.animationUnset(-1),this.boxes=void 0,this.getBoxes(),this.animationInit(),this.debugger(1),"Refreshed"}destroy(t=0){this.animationUnset(-1),this.boxes=void 0,this.observers=[],1==t&&(this.jos_stylesheet.disabled=!0),this.jos_stylesheet=void 0;for(let t in this)this.hasOwnProperty(t)&&"function"!=typeof this[t]&&(this[t]=void 0);return Object.setPrototypeOf(this,null),"JOS Instance Nuked"}}const JOS=new jos;"undefined"!=typeof module&&void 0!==module.exports&&(module.exports=JOS); //By Jesvi Jonathan
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "jos-animation",
|
|
3
|
-
"version": "0.8.
|
|
3
|
+
"version": "0.8.8",
|
|
4
4
|
"description": "An animation library package to instantly add beautiful/professional looking animation to your website",
|
|
5
5
|
"author": "Jesvi Jonathan",
|
|
6
6
|
"files": [
|
|
7
7
|
"dist/*.{css,js}",
|
|
8
8
|
"dev/*.{css,js}"
|
|
9
9
|
],
|
|
10
|
-
"main": "
|
|
10
|
+
"main": "dist/jos.js",
|
|
11
11
|
"repository": {
|
|
12
12
|
"type": "git",
|
|
13
13
|
"url": "git+https://github.com/jesvijonathan/JOS-Animation-Library.git"
|
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
"keywords": [
|
|
16
16
|
"jos",
|
|
17
17
|
"on-scroll",
|
|
18
|
+
"scroll",
|
|
18
19
|
"animation",
|
|
19
20
|
"library",
|
|
20
21
|
"package",
|
package/dev/scroll.js
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
const updateScrollPercentage = function () {
|
|
2
|
-
const heightOfWindow = window.innerHeight,
|
|
3
|
-
contentScrolled = window.pageYOffset,
|
|
4
|
-
bodyHeight = document.body.offsetHeight,
|
|
5
|
-
percentage = document.querySelector("[data-scrollPercentage] .percentage");
|
|
6
|
-
percentageVal = document.querySelector("#percentage-value");
|
|
7
|
-
|
|
8
|
-
if (bodyHeight - contentScrolled <= heightOfWindow) {
|
|
9
|
-
percentageVal.textContent = percentage.style.width = "100%";
|
|
10
|
-
} else {
|
|
11
|
-
const total = bodyHeight - heightOfWindow,
|
|
12
|
-
got = contentScrolled,
|
|
13
|
-
percent = parseInt((got / total) * 100);
|
|
14
|
-
percentageVal.textContent = percentage.style.width = percent + "%";
|
|
15
|
-
}
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
window.addEventListener("scroll", updateScrollPercentage);
|