Commit 7c458b76 authored by i❤computers's avatar i❤computers

Prepare flag images to be animated and not to be animated when

flag is hovered over
parent e2d92aff
......@@ -136,26 +136,28 @@
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 {
[data-cue-position="flag"]:hover .water,
[data-cue-position="water"].highlighted {
animation: 1s fade;
opacity: 1;
}
[data-cue-position="flag"].highlighted:hover .water,
[data-cue-position="flagSymbols"].highlighted .water {
opacity: 0;
animation: none;
}
[data-cue-position="flag"]:hover image.waterBottomRight:nth-child(odd) {
[data-cue-position="flag"] image.waterBottomRight:nth-child(odd) {
animation: 0.5s moveWaterToTopLeft linear infinite alternate;
}
[data-cue-position="flag"]:hover image.waterTopLeft:nth-child(odd) {
[data-cue-position="flag"] image.waterTopLeft:nth-child(odd) {
animation: 0.5s moveWaterToBottomRight linear infinite alternate;
}
......@@ -171,18 +173,23 @@
}
}
[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 {
[data-cue-position="flag"]:hover .star + g image,
g[data-cue-position="firstMaskedStar"].highlighted image,
g[data-cue-position="secondMaskedStar"].highlighted image,
g[data-cue-position="thirdMaskedStar"].highlighted image,
g[data-cue-position="fourthMaskedStar"].highlighted image {
animation: 1s;
animation-name: moveStar, fade;
opacity: 1;
}
[data-cue-position="flag"].highlighted:hover .star + g image,
[data-cue-position="flagSymbols"].highlighted .star + g image {
opacity: 0;
animation: none;
}
......@@ -315,7 +322,7 @@
<span data-cue-position="93">across </span>
<span data-cue-position="94">the middle. </span>
</p>
<figure>
<figure data-cue-position="flagSymbols">
<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" >
......@@ -339,7 +346,7 @@
</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 class="water" aria-hidden="true" data-cue-position="water">
<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>
......@@ -352,7 +359,7 @@
</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 class="water" aria-hidden="true" data-cue-position="water">
<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>
......@@ -366,25 +373,25 @@
<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)">
<g data-cue-position="firstMaskedStar" 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)">
<g data-cue-position="secondMaskedStar" 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)">
<g data-cue-position="thirdMaskedStar" 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)">
<g data-cue-position="fourthMaskedStar" 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>
......
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