Как добавить стороннюю анимацию в таблицу wordpress elementor kit?

<script>

const jsonData = [
 {"text":  "ТАРИФ-ПРОСТОЙ..........350/400"},
  {"text": "ТАРИФ-ПРОСТОЙ+.........400/450"},
  {"text": "ТАРИФ-ОСОБЫЙ...........500/550"},
  {"text": "ТАРИФ-ЭКСКЛЮЗИВ........700/900"},

  // ... add more entries as required
];

jsonData.forEach(item => {
    const li = document.createElement('li');
    li.setAttribute("data-original", item.text);
    li.textContent = item.text;
    document.querySelector("#locations").appendChild(li);
});

animateLocations();

function randomString(length) {
    const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789';
    let result = '';
    for (let i = 0; i < length; i++) {
        result += chars.charAt(Math.floor(Math.random() * chars.length));
    }
    return result;
}

function convertToSpans(text) {
    return [...text].map(char => `<span>${char}</span>`).join("");
}

function animateLocations() {
    const locations = document.querySelectorAll("#locations li");

    locations.forEach(location => {
        location.innerHTML = convertToSpans('ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789'.slice(0, location.getAttribute("data-original").length));
    });

    let indices = [...Array(locations.length).keys()];
    indices.sort(() => Math.random() - 0.5);

    indices.forEach((locationIndex, index) => {
        const location = locations[locationIndex];
        setTimeout(() => {
            const originalText = location.getAttribute("data-original");
            location.innerHTML = convertToSpans(originalText);

            const spans = location.querySelectorAll('span');
            let timer = setInterval(() => {
                spans.forEach(span => {
                    span.textContent = randomString(1);
                });
            }, 100);

            setTimeout(() => {
                clearInterval(timer);
                let counter = spans.length - 1;
                const buildText = setInterval(() => {
                    if (counter >= 0) {
                        spans[counter].textContent = originalText[counter];
                        counter--;
                    } else {
                        clearInterval(buildText);
                    }
                }, 100);
            }, 1500);
        }, 500 * index);
    });
}

window.addEventListener("resize", AutoScale); //Масштабируем страницу при растягивании окна

AutoScale(); //Масштабируем страницу после загрузки

function AutoScale()
{
    let width = window.screen.width; //Ширина окна
    //Если вы хотите проверять по размеру экрана, то вам нужно свойство window.screen.width

    if(width > 1280)
    {
     ChangeScale("big");
    }
    else if(width <= 1280 && width > 720)
    {
     ChangeScale("normal");
    }
    else if(width < 720)
    {
     ChangeScale("small");
    }
}

</script>

Вот здесь пример. Спасибо


Ответы (0 шт):