Цитата:
<!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> |
Может быть так? Обработка ведется как в тегах абзаца, так и без них, плюс первый символ каждого контейнера about-content-1 оборачивается span c классом, который может быть стилизирован обычным css
<div class="about-content-1"><p>135232614qsfw523rdt235dg3456</p></div> <div class="about-content-1">13sgsfj4qsfw523rdt235dg3456</div> <div class="about-content-1">135232615dfj73253456</div> <script> const typing = document.querySelectorAll('.about-content-1, .about-content-1 *'); 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 class="dont-touch">'+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> |
Сразу чувствуется рука мастера! Я бы хрен допер до такого решения! Спасибо Рони, Спасибо Дмитрий - оба помогли и изящно! Вопрос решился!
|
Обращайтесь:)
|
Часовой пояс GMT +3, время: 01:52. |