Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
What's new
10
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Open sidebar
ℹ️❤️🖥
Explorable-Podcast-Proof-of-Concept
Commits
f3a2e10e
Commit
f3a2e10e
authored
Sep 07, 2017
by
i❤computers
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Fade out flag when Roman says "a white field"
parent
9fa663a6
Changes
2
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
40 additions
and
10 deletions
+40
-10
index.html
index.html
+36
-10
script.js
script.js
+4
-0
No files found.
index.html
View file @
f3a2e10e
...
...
@@ -75,26 +75,52 @@
}
}
#flag
.wipes
{
transition
:
transform
0.3s
ease
;
transform-origin
:
right
;
/* When not animated, white flag wipes should be hidden*/
[
data-cue-position
=
"flag"
]
.wipes
{
opacity
:
0
;
}
/* Fade blue stripes to white */
[
data-cue-position
=
"flag"
]
.highlighted
.wipes
{
transition
:
opacity
0.3s
ease-in
;
opacity
:
1
;
}
#flag
.wipes.highlighted
{
/* Wipe them back in */
[
data-cue-position
=
"flag"
]
.highlighted
.wipes.highlighted
{
transition
:
transform
0.3s
ease
;
transform-origin
:
right
;
transform
:
scaleX
(
0
);
}
#flag
.star
{
transition
:
transform
0.1s
ease-in
,
opacity
0.1s
ease-in
;
opacity
:
0
;
[
data-cue-position
=
"flag"
]
.highlighted
.star
{
animation-duration
:
0.3s
;
animation-name
:
fadeStarsAndSetUpForFinalTransition
;
transform
:
scale
(
2
);
transform-origin
:
center
;
opacity
:
0
;
}
#flag
.star.highlighted
{
[
data-cue-position
=
"flag"
]
.highlighted
.star.highlighted
{
transition
:
transform
0.1s
ease-in
,
opacity
0.1s
ease-in
;
transform-origin
:
center
;
opacity
:
1
;
transform
:
scale
(
1
);
}
@keyframes
fadeStarsAndSetUpForFinalTransition
{
from
{
opacity
:
1
;
transform
:
scale
(
1
);
}
99
%
{
opacity
:
0
;
transform
:
scale
(
1
);
}
to
{
transform
:
scale
(
2
);
opacity
:
0
;
}
}
</style>
</head>
<body>
...
...
@@ -210,7 +236,7 @@
<span
data-cue-position=
"94"
>
the middle.
</span>
</p>
<figure>
<svg
i
d=
"flag"
width=
"100%"
height=
"100%"
viewBox=
"0 0 720 480"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
xml:space=
"preserve"
style=
"fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"
>
<svg
d
ata-cue-position
=
"flag"
width=
"100%"
height=
"100%"
viewBox=
"0 0 720 480"
version=
"1.1"
xmlns=
"http://www.w3.org/2000/svg"
xml:space=
"preserve"
style=
"fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"
>
<path
d=
"M0,0l720,0l0,480l-720,0l0,-480Z"
style=
"fill:#fff;fill-rule:nonzero;"
></path>
<rect
x=
"0"
y=
"80"
width=
"720"
height=
"80"
style=
"fill:#b3ddf2;"
></rect>
<rect
data-cue-position=
"topWipe"
class=
"wipes"
x=
"0"
y=
"75"
width=
"720"
height=
"90"
style=
"fill:#FFF;"
></rect>
...
...
script.js
View file @
f3a2e10e
...
...
@@ -5,6 +5,10 @@ document.addEventListener('DOMContentLoaded', function initializePage() {
var
transcriptCuesTrack
=
[
0.33
,
0.57
,
0.71
,
1.38
,
2.17
,
2.36
,
2.64
,
3.88
,
4.02
,
4.32
,
4.65
,
5.1
,
5.27
,
5.52
,
5.92
,
6.28
,
6.55
,
7.37
,
8.62
,
9.48
,
10.09
,
10.36
,
11.01
,
11.82
,
12.32
,
13.15
,
13.72
,
14.01
,
14.19
,
14.65
,
15.03
,
15.37
,
15.72
,
16.14
,
16.44
,
16.74
,
17.53
,
17.91
,
18.23
,
18.9
,
19.16
,
19.52
,
20.02
,
21.29
,
21.65
,
21.94
,
22.46
,
23.28
,
23.63
,
23.88
,
24.46
,
24.75
,
25.09
,
25.59
,
26.0
,
26.48
,
26.96
,
27.26
,
27.77
,
28.21
,
28.74
,
29.58
,
30.8
,
31.58
,
32.4
,
32.77
,
33.09
,
33.82
,
34.44
,
34.68
,
35.39
,
35.89
,
36.28
,
37.03
,
37.47
,
37.97
,
38.23
,
38.63
,
39.92
,
40.18
,
41.08
,
42.11
,
43.16
,
43.64
,
44.27
,
45.1
,
45.45
,
46.09
,
46.6
,
46.87
,
47.23
,
48.06
,
48.37
,
48.91
,
49.32
,
49.76
,
50.16
,
50.52
,
50.76
,
51.04
,
51.7
,
52.44
,
53.38
,
54.3
,
54.58
,
55.04
,
55.71
,
56.16
,
56.49
,
57.02
,
57.88
,
58.46
,
59.02
,
59.45
,
60.02
];
var
visualCuesTrack
=
[
{
cueTime
:
43.16
,
cuePositionName
:
"
flag
"
},
{
cueTime
:
44.37
,
cuePositionName
:
"
topWipe
"
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment