Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 27.05.2022, 08:39
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от 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
Аспирант
Отправить личное сообщение для Дмитрий Луценко Посмотреть профиль Найти все сообщения от Дмитрий Луценко
 
Регистрация: 24.05.2022
Сообщений: 36

Может быть так? Обработка ведется как в тегах абзаца, так и без них, плюс первый символ каждого контейнера 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>
Ответить с цитированием
  #13 (permalink)  
Старый 27.05.2022, 09:03
Интересующийся
Отправить личное сообщение для maiskiykot Посмотреть профиль Найти все сообщения от maiskiykot
 
Регистрация: 11.09.2018
Сообщений: 28

Сразу чувствуется рука мастера! Я бы хрен допер до такого решения! Спасибо Рони, Спасибо Дмитрий - оба помогли и изящно! Вопрос решился!
Ответить с цитированием
  #14 (permalink)  
Старый 27.05.2022, 09:13
Аспирант
Отправить личное сообщение для Дмитрий Луценко Посмотреть профиль Найти все сообщения от Дмитрий Луценко
 
Регистрация: 24.05.2022
Сообщений: 36

Обращайтесь
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 13:29
Как замедлить выполнение .. мой первый userscript istvi1003 Общие вопросы Javascript 4 31.03.2013 20:27
Как при быстром многократном клике по кнопке обрабатывать только первый клик battrack jQuery 3 22.03.2012 10:47
Вывести первый символ документа! karakym Общие вопросы Javascript 17 02.12.2010 19:04
А как зделать скрипт, чтобы например скрипт 1 заменялся скриптом 2? yura371 Общие вопросы Javascript 3 06.01.2009 22:40