-
Notifications
You must be signed in to change notification settings - Fork 4
/
lower-third-css-animations.html
173 lines (148 loc) · 5.38 KB
/
lower-third-css-animations.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
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>lower-third-css-animations.html</title>
<link rel="stylesheet" href="docs.css">
<script src="webcg-framework.umd.js"></script>
<style type="text/css">
:root {
/* Define a variable for the margin of the overlay, 96px at 1080p */
--margin: 5vmax;
}
html {
/* Explicitly set background color */
background-color: transparent;
/* Set default box-sizing to border-box for easier sizing of elements */
box-sizing: border-box;
/* Disable scrollbars by clipping page overflow */
overflow: hidden;
/* Set default font family */
font-family: Verdana, Geneva, sans-serif;
/* Set responsive root font size to 43.2px at 1080p */
font-size: 4vh;
}
*, *:before, *:after {
/* Make box-sizing property easy to change by components if required */
box-sizing: inherit;
}
.overlay {
/* Initially hide the overlay */
opacity: 0;
/* Position overlay with equal margin to the left and bottom */
position: absolute;
left: var(--margin);
bottom: var(--margin);
/* Set a max-width to prevent going over the right margin at 100% - 2 * margin, 1728px at 1080p */
max-width: calc(100vw - 2 * var(--margin));
}
.line {
/* Define padding relative to the font size */
padding: 0.2em;
/* Prevent text wrapping and hide overflow */
white-space: nowrap;
overflow: hidden;
}
.line:empty {
/* Hide empty line, both first or second */
display: none;
}
.line-1 {
/* Define background and text color */
background: #29539b linear-gradient(315deg, #29539b 0%, #1e3b70 74%);
color: white;
/* Calculated font size is 43.3px at 1080p */
font-size: 1rem;
}
.line-2 {
/* Define background and text color */
background: #f6f6f6 linear-gradient(315deg, #f6f6f6 0%, #e9e9e9 74%);
color: #222;
/* Calculated font size is 34.56px at 1080p */
font-size: 0.8rem;
}
.intro {
/* Define how the slideIn keyframes are applied */
animation-duration: 0.3s;
animation-name: slideIn;
animation-fill-mode: both;
animation-timing-function: ease-in-out;
}
.outro {
/* Define how the slideOut keyframes are applied */
animation-duration: 0.3s;
animation-name: fadeOut;
animation-fill-mode: both;
animation-timing-function: ease-in;
}
@keyframes slideIn {
/* Fade in by increasing opacity to 1 and slide up by moving up at the same time */
from {
bottom: -10vmax;
opacity: 0;
}
to {
bottom: var(--margin);
opacity: 1;
}
}
@keyframes fadeOut {
/* Fade out by reducing opacity to 0 */
from {
opacity: 1;
}
to {
opacity: 0;
}
}
</style>
<script type="text/javascript">
// Set initial data for webcg-devtools
window.debugData = { 'f0': 'Lower third with a subtitle', 'f1': 'and CSS animations' }
webcg.on('data', function (data) {
document.querySelector('.line-1').innerHTML = data.f0 ? data.f0.text || data.f0 : ''
document.querySelector('.line-2').innerHTML = data.f1 ? data.f1.text || data.f1 : ''
})
webcg.on('play', function () {
const overlay = document.querySelector('.overlay')
// Swap intro and outro classes
overlay.classList.add('intro')
overlay.classList.remove('outro')
// Return promise that is resolved when the animation is over. WebCG will wait for this promise.
return new Promise(resolve => {
// Add the animationend event listener once
overlay.addEventListener('animationend', resolve, { once: true })
})
})
webcg.on('stop', function () {
const overlay = document.querySelector('.overlay')
// Swap intro and outro classes
overlay.classList.remove('intro')
overlay.classList.add('outro')
// Return promise that is resolved when the animation is over. WebCG will wait for this promise.
return new Promise(resolve => {
// Add the animationend event listener once
overlay.addEventListener('animationend', resolve, { once: true })
})
})
let invokeCount = 0
webcg.on('test', function () {
invokeCount++
document.querySelector('.line-1').innerHTML = 'invoked test ' + invokeCount + ' times'
})
webcg.on('test', function (arg1, arg2) {
document.querySelector('.line-2').innerHTML = JSON.stringify(arg1) + ', ' +
JSON.stringify(arg2) + ', ' + new Date().toLocaleString()
})
</script>
</head>
<body>
<section class="docs">
<h1>lower-third-css-animations.html</h1>
</section>
<div class="overlay">
<div class="line line-1">Lower third with a subtitle</div>
<div class="line line-2">and CSS animations</div>
</div>
</body>
</html>