https://www.frasersproperty.co.th/etc.clientlibs/frasersproperty/c…/clientlib-quote.lc-1790065945751-lc.min.js

1document.addEventListener("DOMContentLoaded", function () {
2
3    const containers = document.querySelectorAll(".quote-container.fp-animate");
4
5    if (!containers.length) return;
6
7    containers.forEach(container => {
8
9        const titleSpan = container.querySelector(".quote-container-top-text p b");
10        if (!titleSpan) return;
11
12        const words = titleSpan.textContent.trim().split(" ");
13        titleSpan.innerHTML = "";
14
15        words.forEach(word => {
16            const span = document.createElement("span");
17            span.classList.add("word");
18            span.textContent = word + " ";
19            titleSpan.appendChild(span);
20        });
21
22        const wordEls = titleSpan.querySelectorAll(".word");
23        
24        function handleScroll() {
25            const rect = container.getBoundingClientRect();
26            const windowHeight = window.innerHeight;
27            const viewportCenter = windowHeight / 2;
28            const elementCenter = rect.top + rect.height / 2;
29            if (rect.top > windowHeight) {
30                wordEls.forEach(w => w.classList.remove("active"));
31                return;
32            }
33            if (elementCenter > viewportCenter) {
34                wordEls.forEach(w => w.classList.remove("active"));
35                return;
36            }
37            if (elementCenter <= viewportCenter) {
38                const progress = Math.min(1, (viewportCenter - rect.top) / viewportCenter);
39                const activeCount = Math.floor(progress * wordEls.length);
40                wordEls.forEach((word, index) => {
41                    word.classList.toggle("active", index < activeCount);
42                });
43            }
44        }       
45        window.addEventListener("scroll", handleScroll);
46        handleScroll();
47    });
48
49});