Как сделать бесконечный фейк-чат?

Question

[jj swift]

Здравствуйте. Нужна помощь.
Нужно сделать блок, в котором будет анимация.
В блоке должны содержаться 3 сообщения максимум.
Короче, фейк-переписка. Пользователь доходит до окна с этим чатом (просто демонстративный вариант, чат не с ним), и начинает появляться первое сообщение от кого-то (оно появляется слева). Потом идет ответ от компании, на чьем сайте пользователь находится (справа). Потом снова слева. Потом снова справа. Лишние сообщения уходят вниз. Всего сообщений будет 18. Как это реализовать? Вертикальный слайдер? Я вообще без понятия. Сделайте хоть подсказку.

<div class="chat">
                        <div class="chat-item chat-left">
                            <div class="chat-block flex gradient-to-top" style="visibility: hidden;">
                                <div class="chat-img">
                                    <img src="images\temp\1.png" alt="Анна Коренина">
                                </div>
                                <div>
                                    <div class="user-name to-grad">
                                        Анна Коренина
                                    </div>
                                    <div class="message-1">
                                        Получила портрет ЦА, вы попали прям на все 100%!
                                    </div>
                                </div>
                                
                            </div>
                        </div>
                        <div class="chat-item chat-right">
                            <div class="chat-block flex" style="visibility: hidden;">
                                              
                                <div class="chat-img">
                                    <img src="images\temp\2.png" alt="Менеджер SocialSMM">
                                </div>
                                <div>
                                    <div class="user-name">
                                        Менеджер SocialSMM
                                    </div>
                                    <div class="message-2">
                                        Мы очень старались, кстати, контент-план готов!
                                    </div>
                                    
                                </div>
                                
                            </div>
                        </div>
                        <div class="chat-item chat-left ">
                            <div class="chat-block flex gradient-to-bottom " style="visibility: hidden;">
                                <div class="chat-img">
                                    <img src="images\temp\1.png" alt="Анна Коренина">
                                </div>
                                <div>
                                    <div class="user-name">
                                        Анна Коренина
                                    </div>
                                    <div class="message-3">
                                        Да, отлично, будем утверждать
                                    </div>
                                    
                                </div>
                                
                            </div>
                        </div>
                        
                        
                    </div>

Это (сверху) изначальная верстка. Ее нельзя менять.

Answer 1

[lUser L]

Сам принцип как это можно сделать
сылль 1
ссыль 2

spoiler

Ваше дело кончено, но я солидарен с Владимир Солнцев

Фу, развод какой-нибудь небось? Подсказка: таймеры, Intersection Observer, скролл.

Answer 2

[xmoonlight]

json, timeout, append()

Comments

[jj swift]

Т. Е. По сути создавать с помощью js новый элемент, задавать ему значение, потом блок чата представить как массив, и вставлять в конец? Но тогда куда будут уходить первые сообщения.. Или их удалять вместе со вставкой. А для чего тут json

[xmoonlight]

Дон Белазке, первые - можно удалять вместе со вставкой, держа всегда "окно" в 5-10 сообщений.
json - там все вопросы, ответы и ники - удобная локальная база для генерации чата.

Answer 3

[Владимир Солнцев]

Фу, развод какой-нибудь небось? Подсказка: таймеры, Intersection Observer, скролл.