Skip to content

GitLab

Commit f3a2e10e authored by i❤computers's avatar i❤computers
Browse files

Fade out flag when Roman says "a white field"

parent 9fa663a6
Hide whitespace changes
Inline Side-by-side
Showing with 40 additions and 10 deletions
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 id="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 data-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"
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment