const formatContent = (element) => {
const text = element.textContent.replace(/\s*/g, '');
const number = parseFloat(text);
if (!Number.isNaN(number)) {
const formatted = number.toLocaleString('ru-RU');
if (element.dataset.formatted === text) {
return;
}
element.textContent = formatted;
element.dataset.formatted = formatted;
}
};
const mutationObserver = new MutationObserver(
(mutations) => mutations.forEach((mutation) => formatContent(mutation.target))
);
document.querySelectorAll('.t-calc').forEach((element) => {
formatContent(element);
mutationObserver.observe(element, { childList: true });
});@keyframes bg-move.@keyframes bg-move {
0% { background-position: -500px 0; }
100% { background-position: 1000px 0; }
}
filter: drop-shadow(2px 4px 6px blue); заменить на box-shadow: 2px 4px 6px blue;. И можете добавить will-change: height;.
.hint) пересекается с блоком А (основным текстом), и после, с использованием полученного и порогового (задаёте сами), можно решить, что делать с блоком.const clamp = (min, max, value) => Math.max(min, Math.min(max, value));
const calculateIntersection = (a, b) => {
const aRect = a.getBoundingClientRect();
const bRect = b.getBoundingClientRect();
const top = clamp(aRect.top, aRect.bottom, bRect.top);
const right = clamp(aRect.left, aRect.right, bRect.right);
const bottom = clamp(aRect.top, aRect.bottom, bRect.bottom);
const left = clamp(aRect.left, aRect.right, bRect.left);
const width = right - left;
const height = bottom - top;
const totalArea = bRect.width * bRect.height;
const intersectionArea = width * height;
const intersectionRatio = intersectionArea / totalArea;
return intersectionRatio;
};@keyframes arrow {
0% {
width: 60px;
}
25% {
width: 260px;
transform: translateX(0px);
}
50%, 75% {
width: 60px;
transform: translateX(200px);
}
}