Как добавить стороннюю анимацию в таблицу 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>
Вот здесь пример. Спасибо