Подсвечивание текста

В Zero-блоке создаём 2 шейпа. Один с классом highlight-top-1, второй highlight-bottom-1. Они нужны для запуска и окончания анимации. Своего рода триггеры, для отслеживания продолжительности анимации

Шаг 3

highlight-top-1 выравниваем по верхней границе Zero-блока, чтобы шейп соприкасался с границей блока, второй highlight-bottom-1 ставим уже по нижней границе. То растояние, что у вас останется между двумя этими шейпами и будет продолжительностью анимации. К примеру у меня 150px

Шаг 4

Если нужна новая анимация в этом же Zero-блоке, то повторяем шаги, но уже с новым порядковым номером. К примеру: text-highlight-2, highlight-top-2, highlight-bottom-2. Если хотите добавить в новом Zero-блоке, то вешаем на новый Zero-блок свой новый порядковый номер, а перечисления внутри начинайте с 1. Пример:
uc-highlight-2 > text-highlight-1, highlight-top-1, highlight-bottom-1 и тд

Шаг 5

Внизу или в футере добавляем код, через блок T123.

Шаг 6

Показать код


<!--Подсвечивание текста-->
<!--https://mt-webdesign.ru/highlights-->
<script src="https://matilda-design.ru/library/GSAP.js"></script>
<script src="https://matilda-design.ru/library/ScrollTrigger.js"></script>
<script>
document.addEventListener('DOMContentLoaded', () => {
gsap.registerPlugin(ScrollTrigger);
function getEffectiveHeight(elem) {
if (!elem) return 0;
const height = elem.offsetHeight;
const zoom = parseFloat(getComputedStyle(elem).zoom || "1");
return height * zoom;
}
function wrapText(node) {
if (node.nodeType === Node.TEXT_NODE) {
const fragment = document.createDocumentFragment();
node.textContent.split('').forEach(char => {
const span = document.createElement('span');
span.textContent = char;
fragment.appendChild(span);
});
return fragment;
} else if (node.nodeName === 'BR') {
return document.createElement('br');
} else if (node.nodeType === Node.ELEMENT_NODE) {
const clone = node.cloneNode(false);
node.childNodes.forEach(child => {
clone.appendChild(wrapText(child));
});
return clone;
}
return document.createTextNode('');
}
function createSpans(paragraph) {
const nodes = Array.from(paragraph.childNodes);
paragraph.innerHTML = '';
nodes.forEach(node => {
paragraph.appendChild(wrapText(node));
});
}
function initHighlight(container) {
let j = 1;
while (true) {
const textBlock = container.querySelector(`.text-highlight-${j} .tn-atom`);
const triggerStart = container.querySelector(`.highlight-top-${j}`);
const triggerEnd = container.querySelector(`.highlight-bottom-${j}`);
if (!textBlock || !triggerStart || !triggerEnd) break;
createSpans(textBlock);
const observer = new MutationObserver(() => {
createSpans(textBlock);
});
observer.observe(textBlock, { childList: true, subtree: true, characterData: true });
const spans = Array.from(textBlock.querySelectorAll('span'));
gsap.set(spans, { opacity: 0.2, y: 40 });
const startPos = `top+=${getEffectiveHeight(triggerStart)} center`;
const endPos = `top+=${getEffectiveHeight(container) - getEffectiveHeight(triggerEnd)} center`;
gsap.timeline({
scrollTrigger: {
trigger: container,
start: startPos,
end: endPos,
scrub: 1.5,
markers: false,
invalidateOnRefresh: true
}
}).to(spans, {
opacity: 1,
y: 0,
ease: "power2.out",
stagger: 0.05,
duration: 1
});
j++;
}
}
let i = 1;
while (true) {
const container = document.querySelector(`.uc-highlight-${i}`);
if (!container) break;
initHighlight(container);
i++;
}
window.addEventListener('load', () => ScrollTrigger.refresh());
});
</script>