|
Сообщение от maiskiykot
|
Разметка примерно такая:
<div class="content-1"><p>Текст 1</p></div>
|
так и задавайте .content-1
> p
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<div class="content-1"><p>Текст 1</p></div>
<div class="content-1"><p>Текст 2</p></div>
<div class="content-1"><p>Текст 3</p></div>
<script>
const typing = document.querySelectorAll('.content-1 > p');
console.log(typing)
function type(element) {
function randomOpacity() {
return (Math.floor(Math.random() * 50) + 50) / 100;
}
function randomEms() {
if (Math.random() > .8) {
return (Math.floor(Math.random() * 100) - 50) / 800;
} else {
return 0;
}
}
function wrap(char, i) { // попытка исключить из обработки первый символ
if (i === 0) return '<span style="padding-left: 30px; font-family: Pattaya; font-size: 28px; font-weight: 600; color: #743f49;">' + char + '</span>';
return '<span style="opacity:' + randomOpacity() + '; text-shadow:' + randomEms() + 'em ' + randomEms() + 'em currentColor;">' + char + '</span>';
}
const wrappedText = Array.from(element.textContent).map(wrap);
element.innerHTML = wrappedText.join('');
}
typing.forEach(type);
</script>
</body>
</html>