/
index.js
90 lines (71 loc) · 1.98 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
import liike from '../src/index.js';
const transform = (target, data) => {
const { x = 0, y = 0, opacity = 1 } = data;
target.style.transform = `translate(${x.toFixed(1)}px, ${y.toFixed(1)}px)`;
target.style.opacity = opacity.toFixed(2);
};
const tween = liike(transform);
const $sections = document.getElementsByTagName('section');
document.body.style.overflow = 'hidden';
for (let j = 0; j < $sections.length; j++) {
const $section = $sections[j];
const $p = $section.getElementsByTagName('p')[0];
const words = $p.textContent.trim().split(' ');
$p.textContent = '';
$section.style.position = 'fixed';
for (let i = 0; i < words.length; i++) {
const word = words[i];
const $word = document.createElement('span');
$word.style.opacity = 0;
$word.textContent = word;
$p.appendChild($word);
}
}
const animate = () => {
let startTime = 0;
for (let j = 0; j < $sections.length; j++) {
const $section = $sections[j];
const $p = $section.getElementsByTagName('p')[0];
const $words = $p.getElementsByTagName('span');
$section.style.position = 'absolute';
for (let i = 0; i < $words.length; i++) {
const $word = $words[i];
$word.style.opacity = 0;
tween($word, {
delay: startTime + i * 75,
duration: 1250,
easing: 'bounceOut',
from: {
y: -150,
opacity: 0
},
to: {
y: 0,
opacity: 1
}
});
tween($word, {
delay: startTime + 2500 + ($words.length - i - 1) * 50,
duration: 500,
easing: 'cubicIn',
onend: (target) => {
if (j === $sections.length - 1) {
if (i === $words.length - 1) {
setTimeout(() => {
animate();
}, 1000);
}
}
},
to: {
y: 150,
opacity: 0
}
});
}
startTime += 2600 + $words.length * 50;
}
};
setTimeout(() => {
animate();
}, 1000);