Форум

maiskiykot · #1 (**permalink**) 27.05.2022, 08:09

Приветствую! Силами коллективного разума был доработан скрипт старения шрифта. Однако он срабатывает только для первого элемента dom. Начиная со второго повторяющегося элемента уже опять первый символ обрабатывается. Подскажите: что делаю не так? Спасибо!

const typing = document.querySelectorAll('.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 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);

рони · #2 (**permalink**) 27.05.2022, 08:19

maiskiykot,
Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

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

Извините за глупый вопрос, но как это должно выглядеть?
https://prnt.sc/dEw3AD3nhVXK
Ваш скрипт обрабатывает все символы

maiskiykot · #4 (**permalink**) 27.05.2022, 08:28

Это сложно для меня. Просто может что-то изменить в этом коде?
Разметка примерно такая:
<div class="content-1"><p>Текст 1</p></div>
<div class="content-1"><p>Текст 2</p></div>
<div class="content-1"><p>Текст 3</p></div>

maiskiykot · #5 (**permalink**) 27.05.2022, 08:31

Сообщение от Дмитрий Луценко

Извините за глупый вопрос, но как это должно выглядеть?
https://prnt.sc/dEw3AD3nhVXK
Ваш скрипт обрабатывает все символы

Имеется в виду именно эффект старения. Добавлена только обработка первого символа в параграфе. Начиная со второго параграфа она не работает. В идеале, конечно, хочется чтобы вообще скрипт не трогал первый символ и обрабатывать его с помощью css

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

Вы не могли бы показать/описать, что должно получиться по итогу?

https://prnt.sc/mFoi5-UU5FGe

рони · #7 (**permalink**) 27.05.2022, 08:34

Сообщение от maiskiykot

Начиная со второго повторяющегося элемента уже опять первый символ обрабатывается.

где ваши доказательства?)))
что не так? все элементы с классом about-content-1 обрабатываются одинаково.

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
</head>

<body>
    <div class="about-content-1">12345</div>
    <div class="about-content-1">12345</div>
    <script>
        const typing = document.querySelectorAll('.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 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>

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

По типу, все символы должны иметь различную степень выгорания?

maiskiykot · #9 (**permalink**) 27.05.2022, 08:37

У меня в разметке еще <p></p>. Может из-за этого глючит?

maiskiykot · #10 (**permalink**) 27.05.2022, 08:39

Сообщение от Дмитрий Луценко

По типу, все символы должны иметь различную степень выгорания?

Алгоритм обработки текста устраивает. Не устраивает то, что не могу исключить первый символ, чтобы обработать его с помощью css

Форум

Справочник

Discord чат

Курсы javascript