Как сделать такую анимацию?

Question

[JTester]

Будет такой массив
['text1', 'text2', 'text3']
Хочу сделать анимацию как на видео. То есть, первый текст начинается справа, когда он заежает, выежает текст2, когда он снова заежает, выежает текст3 и т.д. Помогите пожалуйста
Ссылка на видео: тык

Comments

[Елисей Новак]

Подскажите пожалуйста, в какая программа использовалась в видео и как можно графически так расставлять элементы.
P.S.
Я только начинающий

[JTester]

Altere, я хз, не мое видео )

Answer 1

[sharpsss]

Накидал примерно, суть я думаю понятна
https://codepen.io/sharpprahs/pen/MWBodda

Comments

[JTester]

Да, это оно, но проблема в том, что текст надо брать из массива по очереди, скажем есть массив с текстами text1, text2, text3 и вот вверх добавляется текст1, внизу текст2, после вверх текст3 внизу текст1, ну т.к. нет текст4, по этому сначала начинаем

[sharpsss]

JTester, понял чуть позже как за ПК буду подредачу

[JTester]

sharp97, хорошо! Спасибо большое

[sharpsss]

JTester, отредачил ответ

[JTester]

sharp97, мне setInterval нужно добавить, чтобы каждый раз брал текст? Просто увас он как одноразовый

[sharpsss]

JTester, animation-iteration-count в css поменяй там цифру посмотри что будет

[sharpsss]

JTester, если массив будет меняться как-то, то да можно использовать setInterval

[sharpsss]

JTester, ответ мой правильным сделаешь ?) Условия описанные тобой в постановке мое решение покрывает в принципе. Мало ли другим пригодится

[JTester]

sharp97, отметил, спасибо большое

Answer 2

[alexalexes]

Делаете два боковых контейнера (красные), чтобы были примерно по свойствам такие:
position: absolute;
width: 49%; /*ширина должна быть меньше 50%, но больше половины ширины основной колонки (синяя)*/
left: 0; /*right: 0; - для правого контейнера*/
overflow: hidden; /* чтобы текст не вылезал из бокового контейнера с другой стороны основной колонки */
z-index: 1; /*у основной колонки (синяя) z-index должен быть больше, или текущее свойство меньше*/

Теперь в эти контейнеры можете положить текст, обернутый в контейнер (абзац или div). Этими текстовыми контейнерами можно управлять теперь через css свойство transition left/right. Если возможностей css для анимации недостаточно, то привлекаете js для полного анимирования или только для переключения состояния анимации или для ее перезапуска.

Comments

[JTester]

Не понял :(
А можете пожалуйста показать на codepan?

[alexalexes]

Вы не предложили свой вариант решения. В таких случаях, я предлагаю только концепт решения.

[JTester]

alexalexes, ну смотрите, я сделал как вы сказали, а вот на js что делать? Я там создал массив текста, а вот как дальше, я хз

[alexalexes]

Создайте два метода (они же функции, если не умеете писать прототип или класс).
1. Инициализирующий метод.
В этом методе из исходного массива текста создаете текстовые блоки как ноды DOM. Накидываете эти ноды в правый или левый красные контейнеры.
2. Анимирующий метод.
В этом методе через setInteval (по длительности, равный периоду повторения анимации) изменяете свойство текущего текстового блока в left или right в 0 или в значение ширины блока контейнера, чтобы заставить свойство transition отыгрывать анимацию.
PS: Первый метод нужно запускать после того, как весь контент страницы загрузится.
Во втором методе у setInteval время повторения будет зависеть от порядка текстового блока, чтобы получить фазу задержки анимации (если она требуется). Значение ширины блока лучше пересчитывать каждый раз, когда запускается setInterval, так как пользователь может изменять размер видимой области браузера.