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

30
render/index.js
View File

@ -39,9 +39,10 @@ function channelWithEmoji(value) {
}
const emoji = replacements[value];
if (emoji) {
return [Tag('div', {"class": "emoji"}, emoji, [
return [
Tag('span', {"class": "emoji"}, emoji),
Tag("span", {"class": "text-left-margin"}, value)
])];
];
} else {
return [];
}
@ -163,7 +164,9 @@ function buildData(table, images, data, sort) {
for (let block of images.querySelectorAll(".image-container")) {
block.addEventListener("click", function() {
let diffElement = this.querySelector(".block-diff");
let goldElement = this.querySelector(".block-gold");
diffElement.classList.toggle("show_diff");
goldElement.classList.toggle("anim_off");
});
};
@ -197,6 +200,9 @@ const loadFromLocalStorage = (key) => {
}
window.onload = () => {
const linkElements = document.querySelectorAll('link[rel^="stylesheet"][data-theme]');
function updateLinkRel(linkElements, id) {
@ -438,6 +444,26 @@ window.onload = () => {
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);
}
}