Как сделать правильно анимацию?

Question

[RushV]

Всех приветствую!
Есть разметка:

<div class="header-page">
<h1>заголовок 1
<span>заголовок 2</span>
<span>заголовок 3</span>
<span>заголовок 4</span>
</h1>
</div>

Задача такая, анимация h1 и span.
1. Правильно ли моя разметка?
2. Как вообще делается такая анимация c Animate.css?
Просто думаю, что поочерёдное добавление в теги нужного класса.
Прошу не ругать первый раз пытаюсь такое сделать.

Comments

[Ankhena]

1. Правильно ли моя разметка?

span это универсальный строковый, а не блочный контейнер.
Судя по тексту, вероятно, вам нужно использовать что-то другое, например, h2, h3, p или что-то ещё.

2. Как вообще делается такая анимация c Animate.css?

На странице библиотеки всё описано.
Подключить стили и хотя бы 2 класса.

Уточните, что именно у вас не получается.

[RushV]

Ankhena, Я ещё не чего не пробовал. Просто если вот как бы менять текст внутри h1 можно применить span?
пример:

<h1>цвет <span>Красный</span><span>Синий</span></h1>

[Ankhena]

RushV, не очень понятно.
Вы хотите плавно поменять цвет текста?
Или один текст на другой? В этом случае разбиваете операции. Первая скрывает блок с первым текстом, вторая показывает блок со вторым.

[RushV]

Ankhena, Это просто вопрос по смену текста уже. "один текст на другой".
"разбиваете операции" - это без span делается?

[Ankhena]

RushV, со span.
Выбираете эффекты.
Одному спану задаете анимацию на исчезновение, другому на появление.

[RushV]

Ankhena, Конечно в интернете много информации по этой теме, но всё таки спрошу, а как вообще это делается со стороны js алгоритм действий так скажем. Сперва получается мы в документе получаем spam (ы) а потом перебираем через цикл или как?

[Ankhena]

RushV, да, классы можно добавлять и убирать с помощью js в зависимости от каких-то событий.

Сперва получается мы в документе получаем spam (ы) а потом перебираем через цикл или как?

Зависит от того, что нужно получить на выходе.
Зачем мы вообще меняем текст на другой и при каких обстоятельствах.

Думаю, что ваш вопрос нужно уточнить и конкретизировать.

[RushV]

Ankhena, Просто вот интересно как всё работает я хочу понять и научится.
Ну например:
Допустим есть такой заголовок "Система безопасности в Москве".
Задумка например такая, после загрузки странице слова "безопасности", "в Москве" появлялся с анимацией.
Правильно ли моя разметка?

<h1>Система
 <span>безопасности</span>
 <span>в Москве</span>
</h1>

Если правильно, то получаем span (ы) потом перебираем в цекле как вот правильно?
Или вообще не нужен тут цикл?

[Ankhena]

RushV, на span, наверное, будет удобнее разбивать js'ом, чем писать в разметке.

На счет цикла.. я бы проверяла попадание всего заголовка в зону видимости, а не спаны.
Задержку анимации тоже вешала бы в css.

[RushV]

Ankhena, "на span, наверное, будет удобнее разбивать js'ом, чем писать в разметке. " - это как, можете показать пример такого кода?
Хоть посмотрел бы как делается.

[Ankhena]

RushV, это легко гуглится

[RushV]

А как задать вопрос в гугле, правильный?

[Ankhena]

RushV, javascript разбить строку на слова
дальше по обстоятельтсвам

[RushV]

Ankhena, А вот этим методом можно разбить "split()"?

[Ankhena]

RushV, вы читали его описание? Он решает вашу задачу?

[RushV]

Ankhena, До конца блин не дочитал , по ходу не подходит,. А какой метод подойдёт для моей задачи не подскажите?
Может как то и можно у меня мало опыта, но в примерах где я читаю там нет такого.

[Ankhena]

RushV, я даже не знаю, что вы начитали, что он вам не подошел.
Читайте про другие варианты работы со строками и массивами.

[RushV]

Ankhena, Понял, спасибо!

[Ankhena]

RushV, на MDN даже пример ваш есть
https://developer.mozilla.org/ru/docs/Web/JavaScri...