Half-Life-RTX/HLRTest
2
0
Fork 1
Code Issues 12 Pull Requests 1 Packages Projects Releases Wiki Activity

add optimization for animation via viewport IntersectionObserver

Browse Source
This commit is contained in:
NightFox 2024-02-14 17:16:57 +03:00
parent e1ad61e061
commit ef4d806752
2 changed files with 39 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
render/base.css
View File

@ -1,6 +1,6 @@
@font-face { @font-face {
font-family: "Noto Color Emoji"; font-family: "Noto Color Emoji";
src: url("./fonts/NotoColorEmoji/NotoColorEmoji-Regular.ttf"); src: url("./fonts/NotoColorEmoji/Noto-COLRv1-noflags.ttf");
} }
@font-face { @font-face {
font-family: "OpenMojiDemoFont"; font-family: "OpenMojiDemoFont";
@ -10,7 +10,10 @@
font-family: "OpenMojiDemoFont"; font-family: "OpenMojiDemoFont";
src: url("OpenMoji-color-colr1_svg.woff2") format("woff2"); src: url("OpenMoji-color-colr1_svg.woff2") format("woff2");
}*/ }*/
@font-face {
font-family: "Twemoji Mozilla Built";
src: url("./fonts/Mozilla/Twemoji.Mozilla.ttf");
}
html, body { html, body {
@ -30,11 +33,11 @@ h1,h2,h3,h4,h5 {
} }
.emoji { .emoji {
/*font-family: "Twemoji Mozilla Built", sans-serif;*/
/*font-family: "Noto Color Emoji", sans-serif;*/ /*font-family: "Noto Color Emoji", sans-serif;*/
font-family: "OpenMojiDemoFont", sans-serif; font-family: "OpenMojiDemoFont", sans-serif;
/*font-weight: 400; font-weight: 400;
font-style: regular; font-style: normal;
*/
} }
.emoji:after { .emoji:after {
font-variant-emoji: emoji; /* experimental and only in firefox :( */ font-variant-emoji: emoji; /* experimental and only in firefox :( */
@ -241,6 +244,9 @@ body.min { /* split feature */
position: absolute; position: absolute;
animation: flash var(--animation-duration) infinite; animation: flash var(--animation-duration) infinite;
} }
.block-gold.anim_off {
animation: none;
}
:root { :root {

30
render/index.js
View File

@ -39,9 +39,10 @@ function channelWithEmoji(value) {
} }
const emoji = replacements[value]; const emoji = replacements[value];
if (emoji) { if (emoji) {
return [Tag('div', {"class": "emoji"}, emoji, [ return [
Tag('span', {"class": "emoji"}, emoji),
Tag("span", {"class": "text-left-margin"}, value) Tag("span", {"class": "text-left-margin"}, value)
])]; ];
} else { } else {
return []; return [];
} }
@ -163,7 +164,9 @@ function buildData(table, images, data, sort) {
for (let block of images.querySelectorAll(".image-container")) { for (let block of images.querySelectorAll(".image-container")) {
block.addEventListener("click", function() { block.addEventListener("click", function() {
let diffElement = this.querySelector(".block-diff"); let diffElement = this.querySelector(".block-diff");
let goldElement = this.querySelector(".block-gold");
diffElement.classList.toggle("show_diff"); diffElement.classList.toggle("show_diff");
goldElement.classList.toggle("anim_off");
}); });
}; };
@ -197,6 +200,9 @@ const loadFromLocalStorage = (key) => {
} }
window.onload = () => { window.onload = () => {
const linkElements = document.querySelectorAll('link[rel^="stylesheet"][data-theme]'); const linkElements = document.querySelectorAll('link[rel^="stylesheet"][data-theme]');
function updateLinkRel(linkElements, id) { function updateLinkRel(linkElements, id) {
@ -438,6 +444,26 @@ window.onload = () => {
gridContainer.classList.toggle("reversed"); gridContainer.classList.toggle("reversed");
} }
// stop animation when not in viewport
function handleIntersection(entries, observer) {
for (let entry of entries) {
if (!entry.isIntersecting) {
entry.target.classList.add("anim_off");
} else {
entry.target.classList.remove("anim_off");
}
}
}
const observer = new IntersectionObserver(handleIntersection, {
root: null,
threshold: 0.1
});
for (let element of document.querySelectorAll(".block-gold")) {
observer.observe(element);
}
} }