Если я правильно понял, вы хотите показывать каждый символ каждого слова, один за другим, как будто кто-то печатал ... (Если это не то, что вы хотите, пожалуйста, уточните свой вопрос немного больше, включая желаемый результат )
Для этого я бы использовал приведенный ниже подход, где у вас есть массив со словами, затем вы перебираете каждое слово и сразу после того, как вы перебираете каждый символ.
Затем, используя setTimeout
, вы можете показывать одну букву за другой, в примере я добавил немного CSS для лучшей визуализации.
Вы можете увеличить или уменьшить время, изменив число в тайм-ауте: j * 100
до j * 300
(будет медленнее)
var div = document.getElementById("result");
var creativeDesigns = ['Packaging Design',
'Exhibition Design',
'Retail Design',
'Stationery Design',
'Presentation Design',
'Brochure Design',
'Leaflet Design',
'Apparel Design',
'Signage & Livery Design',
'CGI',
'Promotional Videos',
'Photography',
'Press Advert Design',
'Digital Advert Design'
]
for (var i = 0; i < creativeDesigns.length; i++){
let word = creativeDesigns[i];
let elem = document.createElement("span");
elem.className = "word-wrapper"
for (var j = 0; j < word.length; j++){
let char = word[j];
setTimeout(() => {
elem.textContent += char;
}, j * 100)
}
div.appendChild(elem);
}
.word-wrapper{
margin: 8px;
min-width: 50px;
border: 1px solid;
display: inline-block;
padding: 6px;
}
<div id="result"></div>