Commit 5d226004 authored by i❤computers's avatar i❤computers

* Animate logo when highlighted

* In the logo, don't turn the squares, behind the yellow text, yellow
parent 944fb138
......@@ -90,9 +90,9 @@
<rect x="225.44" y="193.34" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px"/>
<rect x="257.54" y="193.34" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px"/>
<rect x="289.64" y="193.34" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px"/>
<rect x="0.75" y="225.44" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px"/>
<rect x="32.85" y="225.44" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px"/>
<rect x="64.95" y="225.44" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px"/>
<rect x="0.75" y="225.44" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px;fill:none;"/>
<rect x="32.85" y="225.44" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px;fill:none;"/>
<rect x="64.95" y="225.44" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px;fill:none;"/>
<rect x="97.04" y="225.44" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px"/>
<rect x="129.14" y="225.44" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px"/>
<rect x="161.24" y="225.44" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px"/>
......
......@@ -11,6 +11,11 @@ let cuesTrack = [
"endTime": 2.57,
"isTextHighlight": true
},
{
"startTime": 0.71,
"cuePositionName": "logo",
"endTime": 9.48
},
{
"startTime": 2.17,
"cuePositionName": "4",
......
......@@ -318,9 +318,9 @@
<rect x="225.44" y="193.34" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px"/>
<rect x="257.54" y="193.34" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px"/>
<rect x="289.64" y="193.34" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px"/>
<rect x="0.75" y="225.44" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px"/>
<rect x="32.85" y="225.44" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px"/>
<rect x="64.95" y="225.44" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px"/>
<rect x="0.75" y="225.44" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px;fill:none;"/>
<rect x="32.85" y="225.44" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px;fill:none;"/>
<rect x="64.95" y="225.44" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px;fill:none;"/>
<rect x="97.04" y="225.44" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px"/>
<rect x="129.14" y="225.44" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px"/>
<rect x="161.24" y="225.44" width="32.1" height="32.1" style="stroke:#58595b;stroke-width:1.5px"/>
......@@ -593,6 +593,8 @@
</article>
</div>
<script src="bling.js"></script>
<script src="requestInterval.js"></script>
<script src="logoInArticle.js"></script>
<script src="cues.js"></script>
<script src="script.js"></script>
</body>
......
"use strict";
(function bootStrapLogoAnimation() {
const CONSTANTS = {
SQUARE_SELECTOR: 'svg[data-cue-position="logo"] rect:not(:first-child)',
HIGHLIGHTED: 'highlighted',
ENTER_TRANSITION_TIME: 850,
STAY_TRANSITION_TIME: 500,
EXIT_TRANSITION_TIME: 850,
INTERVAL: 250,
CHANCE: 0.95,
};
document.addEventListener('DOMContentLoaded', function bootStrapLogoAnimation() {
const squares = $(CONSTANTS.SQUARE_SELECTOR).map(element => new Square(element));
applyCSSTransitionRules();
setupHighlightedClassObservers(squares);
});
function applyCSSTransitionRules() {
// language=CSS
const styleText = `
${CONSTANTS.SQUARE_SELECTOR}.highlighted {
fill: #fd0;
transition: fill linear ${CONSTANTS.ENTER_TRANSITION_TIME / 1000}s;
}
${CONSTANTS.SQUARE_SELECTOR} {
transition: fill linear ${CONSTANTS.EXIT_TRANSITION_TIME / 1000}s;
}
`;
const styleTag = document.createElement('style');
styleTag.appendChild(document.createTextNode(styleText));
document.head.appendChild(styleTag);
}
function setupHighlightedClassObservers(squares) {
const mutationObserver = new MutationObserver(startStopAnimation.bind(null, squares));
mutationObserver.observe($('svg[data-cue-position="logo"]')[0], {
attributes: true,
attributeFilter: ['class'],
attributeOldValue: true
})
}
let intervalHandle;
function startStopAnimation(squares, mutationList) {
const oldValue = mutationList[0].oldValue;
const target = mutationList[0].target;
if (target.classList.contains(CONSTANTS.HIGHLIGHTED)
&& (!oldValue || !oldValue.includes(CONSTANTS.HIGHLIGHTED))
&& intervalHandle === undefined) {
intervalHandle = requestInterval(animateSquares.bind(null, squares), CONSTANTS.INTERVAL);
} else if (!target.classList.contains(CONSTANTS.HIGHLIGHTED)
&& oldValue && oldValue.includes(CONSTANTS.HIGHLIGHTED)
&& intervalHandle !== undefined) {
clearRequestInterval(intervalHandle);
intervalHandle = undefined;
requestAnimationFrame(removeHighlights.bind(null, squares));
}
}
/**
* @param {Square[]} squares
* @param {DOMHighResTimeStamp} currentTime
*/
function animateSquares(squares, currentTime) {
squares.forEach(square => {
if (Math.random() < CONSTANTS.CHANCE) {
return;
}
square.element.classList.add(CONSTANTS.HIGHLIGHTED);
square.highlighted = true;
square.addedHighlightTime = currentTime;
});
removeFinishedAnimatedHighlights(squares, currentTime);
}
/**
* @param {Square[]} squares
* @param {DOMHighResTimeStamp} currentTime
*/
function removeFinishedAnimatedHighlights(squares, currentTime) {
const TIME_SINCE_HIGHLIGHT = CONSTANTS.ENTER_TRANSITION_TIME + CONSTANTS.STAY_TRANSITION_TIME;
removeHighlights(squares
.filter(square => square.highlighted
&& currentTime - square.addedHighlightTime > TIME_SINCE_HIGHLIGHT
))
;
}
/**
* @param {Square[]} squares
*/
function removeHighlights(squares) {
squares
.forEach(square => {
square.highlighted = false;
square.element.classList.remove(CONSTANTS.HIGHLIGHTED);
})
;
}
class Square {
/**
* @param {Element} element
*/
constructor(element) {
this.highlighted = false;
this.addedHighlightTime = 0;
this.element = element;
}
}
})();
\ No newline at end of file
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