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

* Add in animated Chicago flag

* Don't animate flag when flag is highlighted during audio play
parent b45e7997
......@@ -29,6 +29,12 @@
padding: 0.5em;
}
article:after {
content: "";
display: table;
clear: both;
}
p {
font-size: 1.5em;
margin: 0;
......@@ -121,6 +127,80 @@
opacity: 0;
}
}
.wipes {
opacity: 0;
}
svg a {
cursor: pointer;
}
[data-cue-position="flag"]:hover .water {
animation: 1s fade;
opacity: 1;
}
[data-cue-position="flag"] .water {
transition: 0.25s ease-out;
opacity: 0;
}
[data-cue-position="flag"].highlighted:hover .water {
opacity: 0;
animation: none;
}
[data-cue-position="flag"]:hover image.waterBottomRight:nth-child(odd) {
animation: 0.5s moveWaterToTopLeft linear infinite alternate;
}
[data-cue-position="flag"]:hover image.waterTopLeft:nth-child(odd) {
animation: 0.5s moveWaterToBottomRight linear infinite alternate;
}
@keyframes moveWaterToTopLeft {
to {
transform: translate3d(-10px, -10px, 0);
}
}
@keyframes moveWaterToBottomRight {
to {
transform: translate3d(10px, 10px, 0);
}
}
[data-cue-position="flag"]:hover .star + g image {
animation: 1s;
animation-name: moveStar, fade;
opacity: 1;
}
[data-cue-position="flag"] .star + g image {
transition: 0.25s ease-out;
opacity: 0;
}
[data-cue-position="flag"].highlighted:hover .star + g image {
opacity: 0;
animation: none;
}
@keyframes moveStar {
from {
transform: scale3d(0.85, 0.85, 0.85) translate3d(130px, 82px, 0px);
}
}
@keyframes fade {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
......@@ -236,19 +316,94 @@
<span data-cue-position="94">the middle. </span>
</p>
<figure>
<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>
<rect x="0" y="320" width="720" height="80" style="fill:#b3ddf2;"></rect>
<rect data-cue-position="bottomWipe" class="wipes" x="0" y="315" width="720" height="90" style="fill:#FFF;"></rect>
<path data-cue-position="firstStar" class="star" d="M150,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z" style="fill:#f00;fill-rule:nonzero;"></path>
<path data-cue-position="secondStar" class="star" d="M290,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z" style="fill:#f00;fill-rule:nonzero;"></path>
<path data-cue-position="thirdStar" class="star" d="M430,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z" style="fill:#f00;fill-rule:nonzero;"></path>
<path data-cue-position="fourthStar" class="star" d="M570,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z" style="fill:#f00;fill-rule:nonzero;"></path>
<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;">
<defs>
<clipPath id="topFlagBar" >
<rect x="0" y="80" width="720" height="80"></rect>
</clipPath>
<clipPath id="bottomFlagBar" >
<rect x="0" y="320" width="720" height="80"></rect>
</clipPath>
<clipPath id="firstStar">
<path d="M150,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z"></path>
</clipPath>
<clipPath id="secondStar">
<path d="M290,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z"></path>
</clipPath>
<clipPath id="thirdStar">
<path d="M430,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z"></path>
</clipPath>
<clipPath id="fourthStar">
<path d="M570,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z"></path>
</clipPath>
</defs>
<path d="M0,0l720,0l0,480l-720,0l0,-480Z" style="fill:#fff;fill-rule:nonzero;" aria-hidden="true"></path>
<rect x="0" y="80" width="720" height="80" style="fill:#b3ddf2;" aria-hidden="true"></rect>
<g class="water" aria-hidden="true">
<g clip-path="url(#topFlagBar)">
<image href="image/Chicago River.png" xlink:href="image/Chicago River.png" width="1350" height="247" x="-315" y="-3.5"></image>
</g>
<g clip-path="url(#topFlagBar)">
<image class="waterTopLeft" href="image/Chicago River.png" xlink:href="image/Chicago River.png" width="1350" height="247" x="-320" y="-8.5" opacity="0.5"></image>
</g>
<g clip-path="url(#topFlagBar)">
<image class="waterBottomRight" href="image/Chicago River.png" xlink:href="image/Chicago River.png" width="1350" height="247" x="-310" y="2.5" opacity="0.5"></image>
</g>
</g>
<rect data-cue-position="topWipe" class="wipes" x="0" y="75" width="720" height="90" style="fill:#FFF;" aria-hidden="true"></rect>
<rect x="0" y="320" width="720" height="80" style="fill:#b3ddf2;" aria-hidden="true"></rect>
<g class="water" aria-hidden="true">
<g clip-path="url(#bottomFlagBar)">
<image class="water" href="image/Chicago River.png" xlink:href="image/Chicago River.png" width="1350" height="247" x="-315" y="236.5"></image>
</g>
<g clip-path="url(#bottomFlagBar)">
<image class="waterBottomRight" href="image/Chicago River.png" xlink:href="image/Chicago River.png" width="1350" height="247" x="-310" y="231.5" opacity="0.5"></image>
</g>
<g clip-path="url(#bottomFlagBar)">
<image class="waterTopLeft" href="image/Chicago River.png" xlink:href="image/Chicago River.png" width="1350" height="247" x="-320" y="241.5" opacity="0.5"></image>
</g>
</g>
<rect data-cue-position="bottomWipe" class="wipes" x="0" y="315" width="720" height="90" style="fill:#FFF;" aria-hidden="true"></rect>
<a href="https://en.wikipedia.org/wiki/Fort_Dearborn" xlink:title="Fort Dearborn" title="Fort Dearborn">
<path data-cue-position="firstStar" class="star" d="M150,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z" style="fill:#f00;fill-rule:nonzero;"></path>
<g clip-path="url(#firstStar)">
<image href="image/Fort_Dearborn_1831_Kinzie.jpg" xlink:href="image/Fort_Dearborn_1831_Kinzie.jpg" width="400" height="233" x="-20" y="130"></image>
</g>
</a>
<a href="https://en.wikipedia.org/wiki/Great_Chicago_Fire" xlink:title="Great Chicago Fire" title="Great Chicago Fire">
<path data-cue-position="secondStar" class="star" d="M290,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z" style="fill:#f00;fill-rule:nonzero;"></path>
<g clip-path="url(#secondStar)">
<image href="image/Chicago_in_Flames_by_Currier_&_Ives,_1871.jpg" xlink:href="image/Chicago_in_Flames_by_Currier_&_Ives,_1871.jpg" width="400" height="269" x="-6" y="130"></image>
</g>
</a>
<a href="https://en.wikipedia.org/wiki/World%27s_Columbian_Exposition" xlink:title="World's Columbian Exposition" title="World's Columbian Exposition">
<path data-cue-position="thirdStar" class="star" d="M430,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z" style="fill:#f00;fill-rule:nonzero;"></path>
<g clip-path="url(#thirdStar)">
<image href="image/Brooklyn_Museum_-_Chicago_World's_Fair_-_Thomas_Moran_-_overall.jpg" xlink:href="image/Brooklyn_Museum_-_Chicago_World's_Fair_-_Thomas_Moran_-_overall.jpg" width="400" height="535" x="240" y="-60"></image>
</g>
</a>
<a href="https://en.wikipedia.org/wiki/Century_of_Progress" xlink:title="Century of Progresss Exposition" title="Century of Progresss Exposition">
<path data-cue-position="fourthStar" class="star" d="M570,180l11,41l41,-11l-30,30l30,30l-41,-11l-11,41l-11,-41l-41,11l30,-30l-30,-30l41,11l11,-41Z" style="fill:#f00;fill-rule:nonzero;"></path>
<g clip-path="url(#fourthStar)">
<image href="image/Chicago_world's_fair,_a_century_of_progress,_expo_poster.jpg" xlink:href="image/Chicago_world's_fair,_a_century_of_progress,_expo_poster.jpg" width="301" height="449" x="420" y="165"></image>
</g>
</a>
</svg>
<figcaption>Figure 1. Flag of Chicago, Illinois. <a
href="https://commons.wikimedia.org/wiki/File:Flag_of_Chicago,_Illinois.svg">Source: Wikipedia</a>
<figcaption>Figure 1. Flag of Chicago, Illinois (<a
href="https://commons.wikimedia.org/wiki/File:Flag_of_Chicago,_Illinois.svg">Source: Wikipedia</a>).
Blue
stipes embedded with photo of Chicago River (<a
href="https://commons.wikimedia.org/wiki/File:20090524_Buildings_along_Chicago_River_line_the_south_border_of_the_Near_North_Side_and_Streeterville_and_the_north_border_of_Chicago_Loop,_Lakeshore_East_and_Illinois_Center.jpg">Source:
Wikipedia</a>). Stars embedded with illustrations of Fort Dearborn (<a
href="https://en.wikipedia.org/wiki/File:Fort_Dearborn_1831_Kinzie.jpg">Source: Wikipedia</a>),
the
Great Chicago Fire (<a
href="https://en.wikipedia.org/wiki/File:Chicago_in_Flames_by_Currier_%26_Ives,_1871_(cropped).jpg">Source:
Wikipedia</a>), World's Columbian Exposition (<a
href="https://en.wikipedia.org/wiki/File:Brooklyn_Museum_-_Chicago_World%27s_Fair_-_Thomas_Moran_-_overall.jpg">Source:
Wikipedia</a>), Century of Progress Exposition (<a
href="https://en.wikipedia.org/wiki/File:Chicago_world%27s_fair,_a_century_of_progress,_expo_poster,_1933,_2.jpg">Source:
Wikipedia</a>).
</figcaption>
</figure>
<h1>
......
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