Skip to content

Commit c9729e5

Browse files
ahkambohahkamboh
committed
cdn-test
1 parent 0f0b78d commit c9729e5

11 files changed

+682
-3
lines changed

‎cdns/dancetext@animatio2.js‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
class DanceText {
2+
constructor(textArray, speed = 0.5, direction = "none") {
3+
this.textArray = textArray;
4+
this.speed = speed;
5+
this.direction = direction;
6+
this.currentIndex = 0;
7+
this.textElements = document.querySelectorAll('.DanceText');
8+
this.loadAnimeJS().then(() => this.startTextAnimation());
9+
}
10+
11+
loadAnimeJS() {
12+
return new Promise((resolve, reject) => {
13+
if (typeof anime !== 'undefined') {
14+
resolve();
15+
} else {
16+
const script = document.createElement('script');
17+
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js';
18+
script.onload = resolve;
19+
script.onerror = reject;
20+
document.head.appendChild(script);
21+
}
22+
});
23+
}
24+
25+
animateText(element) {
26+
if (element) {
27+
element.innerHTML = this.textArray[this.currentIndex].replace(
28+
/\S/g,
29+
"<span style='display: inline-block;' class='letter230'>$&</span>"
30+
);
31+
32+
let animationProps;
33+
switch (this.direction) {
34+
case "top":
35+
animationProps = { translateY: [-90, 0] };
36+
break;
37+
case "bottom":
38+
animationProps = { translateY: [90, 0] };
39+
break;
40+
default:
41+
animationProps = { translateY: [90, 0] };
42+
}
43+
44+
anime.timeline({ loop: false })
45+
.add({
46+
targets: '.letter230',
47+
...animationProps,
48+
duration: 950 / this.speed,
49+
delay: (el, i) => 50 * i
50+
})
51+
.add({
52+
targets: '.ml440',
53+
duration: 2000,
54+
easing: "easeOutExpo",
55+
delay: (el, i) => 50 * i + 1000
56+
});
57+
58+
this.currentIndex = (this.currentIndex + 1) % this.textArray.length;
59+
}
60+
}
61+
62+
startTextAnimation() {
63+
this.textElements.forEach(element => this.animateText(element));
64+
setInterval(() => {
65+
this.textElements.forEach(element => this.animateText(element));
66+
}, 1350 / this.speed);
67+
}
68+
}
69+
70+
// Usage example:
71+
// const animatio = new DanceText(["Capture", "Animation"], 0.5, "none");
72+

‎cdns/flowingtext@animatio2.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
class FlowingText {
2+
constructor(textArray, speed = 0.8) {
3+
this.textArray = textArray;
4+
this.speed = speed;
5+
this.currentIndex = 0;
6+
this.textElements = document.querySelectorAll('.FlowingText');
7+
this.loadAnimeJS().then(() => this.startTextAnimation());
8+
}
9+
10+
loadAnimeJS() {
11+
return new Promise((resolve, reject) => {
12+
if (typeof anime !== 'undefined') {
13+
resolve();
14+
} else {
15+
const script = document.createElement('script');
16+
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js';
17+
script.onload = resolve;
18+
script.onerror = reject;
19+
document.head.appendChild(script);
20+
}
21+
});
22+
}
23+
24+
animateText(element) {
25+
if (element) {
26+
const animationConfig = {
27+
opacityIn: [0, 1],
28+
scaleIn: [0.2, 1],
29+
scaleOut: 3,
30+
durationIn: 800 / this.speed,
31+
durationOut: 600 / this.speed,
32+
delay: 500 / this.speed
33+
};
34+
35+
element.innerHTML = this.textArray[this.currentIndex].split('').map(char => `<span style='display: inline-block; opacity: 0;'>${char}</span>`).join('');
36+
37+
const timeline = anime.timeline({ loop: false });
38+
39+
timeline
40+
.add({
41+
targets: element.children,
42+
opacity: animationConfig.opacityIn,
43+
scale: animationConfig.scaleIn,
44+
duration: animationConfig.durationIn,
45+
easing: 'easeOutExpo',
46+
delay: anime.stagger(100 / this.speed)
47+
})
48+
.add({
49+
targets: element.children,
50+
opacity: 0,
51+
scale: animationConfig.scaleOut,
52+
duration: animationConfig.durationOut,
53+
easing: "easeInExpo",
54+
delay: animationConfig.delay
55+
});
56+
}
57+
}
58+
59+
startTextAnimation() {
60+
this.textElements.forEach(element => this.animateText(element));
61+
setInterval(() => {
62+
this.currentIndex = (this.currentIndex + 1) % this.textArray.length;
63+
this.textElements.forEach(element => this.animateText(element));
64+
}, 2500 / this.speed);
65+
}
66+
}
67+
68+
// Usage example:
69+
// const animatio = new FlowingText(["Capture", "Animation"], 0.8);
70+

‎cdns/glidetext@animatio2.js‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
class GlideText {
2+
constructor(textArray, speed = 1, direction = "vertical") {
3+
this.textArray = textArray;
4+
this.speed = speed;
5+
this.direction = direction;
6+
this.currentIndex = 0;
7+
this.textElements = document.querySelectorAll('.GlideText');
8+
this.loadAnimeJS().then(() => this.startTextAnimation());
9+
}
10+
11+
loadAnimeJS() {
12+
return new Promise((resolve, reject) => {
13+
if (typeof anime !== 'undefined') {
14+
resolve();
15+
} else {
16+
const script = document.createElement('script');
17+
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js';
18+
script.onload = resolve;
19+
script.onerror = reject;
20+
document.head.appendChild(script);
21+
}
22+
});
23+
}
24+
25+
animateText(element) {
26+
if (element) {
27+
let translateIn, translateOut;
28+
29+
switch (this.direction) {
30+
case "top":
31+
translateIn = [20, 0];
32+
translateOut = -20;
33+
break;
34+
case "bottom":
35+
translateIn = [-20, 0];
36+
translateOut = 20;
37+
break;
38+
case "left":
39+
translateIn = [20, 0];
40+
translateOut = -20;
41+
break;
42+
case "right":
43+
translateIn = [-20, 0];
44+
translateOut = 20;
45+
break;
46+
case "horizontal":
47+
translateIn = [20, 0];
48+
translateOut = -20;
49+
break;
50+
case "vertical":
51+
default:
52+
translateIn = [20, 0];
53+
translateOut = -20;
54+
break;
55+
}
56+
57+
anime.timeline({ loop: false })
58+
.add({
59+
targets: element,
60+
opacity: [0, 1],
61+
translateY: this.direction === "top" || this.direction === "bottom" || this.direction === "vertical" ? translateIn : 0,
62+
translateX: this.direction === "left" || this.direction === "right" || this.direction === "horizontal" ? translateIn : 0,
63+
easing: "easeOutExpo",
64+
duration: 1000 / this.speed
65+
})
66+
.add({
67+
targets: element,
68+
opacity: 0,
69+
translateY: this.direction === "top" || this.direction === "bottom" || this.direction === "vertical" ? translateOut : 0,
70+
translateX: this.direction === "left" || this.direction === "right" || this.direction === "horizontal" ? translateOut : 0,
71+
easing: "easeInExpo",
72+
duration: 1000 / this.speed,
73+
});
74+
}
75+
}
76+
77+
startTextAnimation() {
78+
this.textElements.forEach(element => this.animateText(element));
79+
setInterval(() => {
80+
this.currentIndex = (this.currentIndex + 1) % this.textArray.length;
81+
this.textElements.forEach(element => this.animateText(element));
82+
}, 2000 / this.speed);
83+
}
84+
}
85+
86+
// Usage example:
87+
// const animatio = new GlideText(["Capture", "Animation"], 1, "vertical");
88+

‎cdns/letterpoptext@animatio2.js‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
class LetterPopText {
2+
constructor(textArray, speed = 0.8) {
3+
this.textArray = textArray;
4+
this.speed = speed;
5+
this.currentWordIndex = 0;
6+
this.textElements = document.querySelectorAll('.LetterPopText');
7+
this.loadAnimeJS().then(() => this.startTextAnimation());
8+
}
9+
10+
loadAnimeJS() {
11+
return new Promise((resolve, reject) => {
12+
if (typeof anime !== 'undefined') {
13+
resolve();
14+
} else {
15+
const script = document.createElement('script');
16+
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js';
17+
script.onload = resolve;
18+
script.onerror = reject;
19+
document.head.appendChild(script);
20+
}
21+
});
22+
}
23+
24+
animateText(element) {
25+
if (element) {
26+
element.innerHTML = this.textArray[this.currentWordIndex].replace(
27+
/\S/g,
28+
"<span style='display: inline-block;'>$&</span>"
29+
);
30+
31+
anime.timeline({ loop: false })
32+
.add({
33+
targets: `.${element.className} span`,
34+
opacity: [0, 1],
35+
scale: [0.2, 1],
36+
duration: 800 / this.speed,
37+
})
38+
.add({
39+
targets: `.${element.className} span`,
40+
opacity: 0,
41+
scale: 3,
42+
easing: "easeInExpo",
43+
duration: 600 / this.speed,
44+
delay: 500 / this.speed,
45+
});
46+
}
47+
}
48+
49+
startTextAnimation() {
50+
this.textElements.forEach(element => this.animateText(element));
51+
setInterval(() => {
52+
this.currentWordIndex = (this.currentWordIndex + 1) % this.textArray.length;
53+
this.textElements.forEach(element => this.animateText(element));
54+
}, 2050 / this.speed);
55+
}
56+
}
57+
58+
// Usage example:
59+
// const animatio = new LetterPopText(["Capture", "Animation"], 0.8);
60+

‎cdns/slittext@animatio2.js‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
class SlitText {
2+
constructor(textArray, speed = 0.7) {
3+
this.textArray = textArray;
4+
this.speed = speed;
5+
this.currentIndex = 0;
6+
this.textElements = document.querySelectorAll('.SlitText');
7+
this.loadAnimeJS().then(() => this.startTextAnimation());
8+
}
9+
10+
loadAnimeJS() {
11+
return new Promise((resolve, reject) => {
12+
if (typeof anime !== 'undefined') {
13+
resolve();
14+
} else {
15+
const script = document.createElement('script');
16+
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js';
17+
script.onload = resolve;
18+
script.onerror = reject;
19+
document.head.appendChild(script);
20+
}
21+
});
22+
}
23+
24+
animateText(element) {
25+
if (element) {
26+
const animationConfig = {
27+
opacityIn: [0, 1],
28+
scaleIn: [0.2, 1],
29+
scaleOut: 3,
30+
durationIn: 800 / this.speed,
31+
durationOut: 600 / this.speed,
32+
delay: 500 / this.speed
33+
};
34+
35+
element.innerHTML = this.textArray[this.currentIndex].split('').map(char => `<span style='display: inline-block; opacity: 0;'>${char}</span>`).join('');
36+
37+
const timeline = anime.timeline({ loop: false });
38+
39+
timeline
40+
.add({
41+
targets: element.children,
42+
opacity: animationConfig.opacityIn,
43+
scale: animationConfig.scaleIn,
44+
duration: animationConfig.durationIn,
45+
easing: 'easeOutExpo',
46+
delay: anime.stagger(100 / this.speed)
47+
})
48+
.add({
49+
targets: element.children,
50+
opacity: 0,
51+
scale: animationConfig.scaleOut,
52+
duration: animationConfig.durationOut,
53+
easing: "easeInExpo",
54+
delay: animationConfig.delay
55+
});
56+
}
57+
}
58+
59+
startTextAnimation() {
60+
this.textElements.forEach(element => this.animateText(element));
61+
setInterval(() => {
62+
this.currentIndex = (this.currentIndex + 1) % this.textArray.length;
63+
this.textElements.forEach(element => this.animateText(element));
64+
}, 2500 / this.speed);
65+
}
66+
}
67+
68+
// Usage example:
69+
// const animatio = new SlitText(["Capture", "Animation"], 0.7);
70+

0 commit comments

Comments
 (0)