-
Notifications
You must be signed in to change notification settings - Fork 9
/
placerapid.html
138 lines (122 loc) · 4.74 KB
/
placerapid.html
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
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="css/core.css"/>
<link rel="stylesheet" href="css/user.css"/>
<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="js/core.js"></script>
<script>
lyricBlocks = document.getElementsByClassName('lyrics');
last_lyrics_text = '';
function callback_lyrics_current(lines) {
// Build new inner HTML for lyrics
html = lyrics_text_html_perchar(lines);
newId = new Date().getTime().toString();
if(html == last_lyrics_text) {
// Don't re-animate if the two slides are the same
return true;
}
last_lyrics_text = html;
// Delete existing lyrics
lyricBlocksExisting = document.getElementsByClassName('lyrics');
for(var b = 0; b < lyricBlocksExisting.length; b++) {
thisId = lyricBlocksExisting[b].id;
if(thisId == newId) {
continue;
}
lyricLinesExisting = lyricBlocksExisting[b].getElementsByTagName('span');
for(var i = 0; i < lyricLinesExisting.length; i++) {
lyricLinesExisting[i].style.animation = 'anout 0.5s';
lyricLinesExisting[i].style.opacity = '0';
}
setTimeout(function(block) {
if(typeof block !== 'undefined' && block.parentNode != null) {
block.parentNode.removeChild(block);
}
}, 600, lyricBlocksExisting[b]);
}
if(html == '') {
return true;
}
// Create new lyrics
newElement = document.createElement("div");
newElement.className = "lyrics";
newElement.id = newId;
newElement.innerHTML = html;
lines = newElement.getElementsByTagName('span');
// The lyric lines all start out of frame
var animationDelay = 6;
for(var i = 0; i < lines.length; i++) {
lines[i].style['animation-delay'] = animationDelay * i + 'ms';
}
// Add new lyrics to DOM
document.getElementById('container').appendChild(newElement);
}
function lyrics_text_html_perchar(lines) {
var html = '';
for(var lineI in lines) {
var line = lines[lineI].trim();
if(line != "") {
html += '<p>';
for(let i = 0; i < line.length; i++) {
html += '<span class="char">' + (line[i] == ' ' ? ' ' : line[i])+ '</span>';
}
html += '</p>';
}
}
return html;
}
</script>
<style>
.container {
display: block;
}
.lyrics {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
.lyrics p {
display: block;
height: 2.2rem;
margin-bottom: 1rem;
width: 100%;
}
.lyrics p span {
animation: anin 0.7s ease-out 1 both;
display: inline-block;
}
@keyframes anin {
from {
opacity: 0;
transform: perspective(100px) translate3d(0, 0, 500px) rotate3d(1, -1, 0, 35deg);
}
to {
opacity: 1;
transform: perspective(500px) translate3d(0, 0, 0);
}
}
@keyframes anout {
from {
opacity: 1;
transform: perspective(500px) translate3d(0, 0, 0);
}
to {
opacity: 0;
transform: perspective(500px) translate3d(5px, 5px, 5px) rotate3d(1, -1, 0, 35deg);
}
}
</style>
</head>
<body>
<div class="container center uppercase" id="container">
<div class="lyrics" id="0"><!-- Lyrics go here --></div>
</div>
</body>
</html>