Как сделать поочерёдное появление слов в ряд текста?

Question

[RushV]

Как сделать поочерёдное появления текста в ряд внутри тега h1?
Вот такая разметка:

<div class="header-page">
<h1>раз два три</h1>
</div>

// JavaScript
    let strTitle = $(' h1').text();
    for(let key of strTitle.split('" ")){
        $('.banner-text h1').text(key);
    }

Comments

[Александр]

Посмотрите на typed.js.

[RushV]

Мне вот типа такого сделать
После загрузки страницы через 2-3 секунды как бы появлялись внутри тега h1 сперва допустим 1, потом 2, потом, 3.

Answer 1

[Сергей Соколов]

Понадобится ссылка на элемент, и массив слов.
В переменной держать счётчик, он будет определять слово из набора.
Будет увеличиваться на 1 на каждом шаге. Чтобы получить из него валидный индекс элемента массива, брать остаток от деления % на длину массива.



Тут происходит сразу несколько вещей:words[current++ % words.length]

1. current++ счетчик увеличивается на 1, но «в работу» поступает его значение ДО увеличения
   
2. current % words.length даёт остаток от деления на длину массива. Если в массиве 3 элемента, остаток будет 0, 1 или 2. Как раз индексы слов в массиве.
   
   

Comments

[RushV]

А можно просто вывести раз, два, и три как бы в ряд появились и всё?
Что бы не менялись слова просты вывелись по очереди и всё.
Понимаю достал не как не могу сформулировать вопросы, прошу прощения за тупизм.

[Сергей Соколов]

RushV, строки можно складывать: "раз" + "два" == "раздва"
Попробуйте «испортить» мой пример так, чтобы слова не заменяли текст, а добавлялись к нему — пусть пока что в бесконечном цикле и без пробелов. Скиньте ссылку на получившийся фиддл. Тогда продолжим беседу )

подсказка

для этого достаточно добавить всего один знак плюса, чтобы вместо = стало +=

[RushV]

Сергей Соколов, Сложновато для меня) менять вот в этом блоке [current++ % words.length];?
Я просто хочу понять.

[RushV]

Сергей Соколов, Мне ваш вариант кода более понятный. В какой строке мне добавить += , что бы заработало как надо?
Просто хочу код разобрать и понять как работает.

[Сергей Соколов]

RushV, const update = () => el.textContent += .....

[RushV]

Сергей Соколов, Теперь я как понимаю надо поставить break?

[Сергей Соколов]

RushV, хорошо бы перед этим полностью очистить, а то исходный текст остаётся.
И да, не повторять бесконечно, только 3 раза.
Не break – тут же таймауты. Можно вместо setInterval делать setTimeout в конце очередной итерации. Только, если ещё есть, что дописывать.

[RushV]

Сергей Соколов, Блин целая наука. Если вам не сложно можете сделать рабочий код?
И вопрос, а если там допустим 3 и 10 и более и как пробелы сделать.
У меня познания так себе я могу только поменять цвет, добавить классы и.т.п.
Я старенький уже 42 стукнуло)
Конечно хочется блин научится сложные вещи писать.

[Сергей Соколов]

RushV, рабочий код? — нет. Покажите хоть что-то, что вы сделали сами сначала, ровесник.

[RushV]

Сергей Соколов,Вот что я натворил код
Сейчас смеяться будете(

[Сергей Соколов]

RushV, лучше так

const el = document.querySelector("h1");
const words = el.textContent.split(" ");
el.textContent = ""; // очистить для начала

let current = 0;
const update = () => {
  el.textContent += words[current % words.length] + " "; // и пробел
  current++;
  if (current < 3) setTimeout(update, 1000); // передать пас следующему
  else el.style.borderBottom = '2px solid #555';
};
update();

[RushV]

Сергей Соколов, Получается h1 это как массив? А если в массиве больше трёх и более то что тогда?
Так то получается что я получаю h1 делаю как массив и этот массив я выстраиваю в ряд.

[Сергей Соколов]

RushV, я криво написал. Вместо if (current < 3) лучше if (current < words.length)

Берется текст из H1, и бьётся по пробелам в массив слов words.

Answer 2

[TheOnlyFastCoder2]

Прощу прощения но вы уже задавали такой вопрос , в предыдущий раз .

span {
  transition: 1s;
  opacity: 0;
}

<h1 id="giveText"></h1>

const giveText = document.getElementById("giveText")
const myTEXT = "задайте свой текст";

window.onload = () => {
  myTEXT.split(" ").forEach( (word,i) => {
    giveText.innerHTML +=  ` <span>${word}</span>`
    setTimeout( () => {
      giveText.children[i].setAttribute("style","opacity:1")
    },(i+1)*600)
  })
}

Comments

[RushV]

Да задавал, надо было указать по другому выстраивание в ряд как бы слова не стал править вопрос.
Не стал вас так сказать мучить своими глупыми вопросами я не проф в этом только учусь.
Просто как описать простыми словами. Есть страница с заголовком уже имеющим словами например "один два три" при загрузке страницы вот эти слова выстраивались в ряд как бы сперва один, через секунду два и.т.п.
Извиняюсь за русский!

[TheOnlyFastCoder2]

RushV, сделал так , чтобы вы смогли посмотреть результат наяву . Нажмите на кнопочку Rerun (в нижнем правом углу )

[RushV]

TheOnlyFastCoder2, Во то что нужно. Только вот в теге h1 должен уже быть текст.
Типа мы берём с тега этот текст и выстраиваем вряд после загрузки страницы, можно так сделать?
Заранее благодарю за помощь!
Теперь буду изучать что как сделано.
Стрелочные функции плохо понимаю.

[TheOnlyFastCoder2]

RushV, обновил