Форум

рони · #11 (**permalink**) 27.05.2022, 08:39

Сообщение от 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>

Дмитрий Луценко · #12 (**permalink**) 27.05.2022, 08:50

Может быть так? Обработка ведется как в тегах абзаца, так и без них, плюс первый символ каждого контейнера 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>

maiskiykot · #13 (**permalink**) 27.05.2022, 09:03

Сразу чувствуется рука мастера! Я бы хрен допер до такого решения! Спасибо Рони, Спасибо Дмитрий - оба помогли и изящно! Вопрос решился!

Дмитрий Луценко · #14 (**permalink**) 27.05.2022, 09:13

Обращайтесь

Форум

Справочник

Discord чат

Курсы javascript