Commit 0dd3d9d0 authored by i❤computers's avatar i❤computers

* Time masked image animation to audio

* Don't trigger rest of animation on hover when in the middle of the
animation
parent 7c458b76
......@@ -329,9 +329,17 @@ var cuesTrack = [{
}, {
startTime: 51.7,
cuePositionName: "100"
}, {
startTime: 51.7,
movieClip: "flagSymbols",
cuePositionName: "flagSymbols"
}, {
startTime: 52.44,
cuePositionName: "101"
}, {
startTime: 52.44,
movieClip: "flagSymbols",
cuePositionName: "water"
}, {
startTime: 53.38,
cuePositionName: "102"
......@@ -350,12 +358,28 @@ var cuesTrack = [{
}, {
startTime: 56.16,
cuePositionName: "107"
}, {
startTime: 56.16,
movieClip: "flagSymbols",
cuePositionName: "firstMaskedStar"
}, {
startTime: 56.49,
cuePositionName: "108"
}, {
startTime: 56.66,
movieClip: "flagSymbols",
cuePositionName: "secondMaskedStar"
}, {
startTime: 57.02,
cuePositionName: "109"
}, {
startTime: 57.16,
movieClip: "flagSymbols",
cuePositionName: "thirdMaskedStar"
}, {
startTime: 57.66,
movieClip: "flagSymbols",
cuePositionName: "fourthMaskedStar"
}, {
startTime: 57.88,
cuePositionName: "110"
......@@ -379,6 +403,8 @@ var cuesTrackByEndTime = cuesTrack
var startTime = cue.startTime;
if (cue.movieClip === "flag") {
startTime = 49.75;
} else if (cue.movieClip === "flagSymbols") {
startTime = 60.02;
}
cue.endTime = startTime + HIGHLIGHT_DURATION;
return cue;
......
......@@ -142,13 +142,15 @@
}
[data-cue-position="flag"]:hover .water,
[data-cue-position="water"].highlighted {
[data-cue-position="water"].highlighted,
[data-cue-position="water"].highlighted .water {
animation: 1s fade;
opacity: 1;
}
[data-cue-position="flag"].highlighted:hover .water,
[data-cue-position="flagSymbols"].highlighted .water {
[data-cue-position="flagSymbols"].highlighted:hover [data-cue-position="water"]:not(.highlighted) .water,
[data-cue-position="flagSymbols"].highlighted:hover [data-cue-position="water"]:not(.highlighted) {
opacity: 0;
animation: none;
}
......@@ -189,7 +191,10 @@
}
[data-cue-position="flag"].highlighted:hover .star + g image,
[data-cue-position="flagSymbols"].highlighted .star + g image {
[data-cue-position="flagSymbols"].highlighted:hover g[data-cue-position="firstMaskedStar"]:not(.highlighted) image,
[data-cue-position="flagSymbols"].highlighted:hover g[data-cue-position="secondMaskedStar"]:not(.highlighted) image,
[data-cue-position="flagSymbols"].highlighted:hover g[data-cue-position="thirdMaskedStar"]:not(.highlighted) image,
[data-cue-position="flagSymbols"].highlighted:hover g[data-cue-position="fourthMaskedStar"]:not(.highlighted) image {
opacity: 0;
animation: none;
}
......
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