Фейк-переписка, как реализовать?
Нужна помощь. Нужно сделать блок, в котором будет анимация. В блоке должны содержаться 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>
Это верстка. Ее нельзя менять класс left - сообщения слева, класс right - справа. Т.е. как обычный чат, от лица Анны отправляется сообщение, потом от лица менеджера. Сообщения которые лишние уходят наверх, как в любых мессенджерах
Ответы (1 шт):
Автор решения: hu-fo
→ Ссылка
body {
height: 100vh;
margin: 0;
display: flex;
align-items: center;
justify-content: center;
}
.chat-wrapper {
--chat-height: 500px;
width: 620px;
height: var(--chat-height);
overflow: hidden;
}
.chat {
display: flex;
flex-direction: column;
width: 100%;
height: max-content;
animation-name: chat-scroll;
animation-duration: 15s;
animation-fill-mode: both;
animation-timing-function: ease-in-out;
animation-delay: 1.5s;
}
.message {
margin: 25px;
width: 70%;
min-height: calc(var(--chat-height) / 3 - 50px);
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
border-radius: 10px;
font-family: sans-serif;
font-size: 2rem;
animation-name: show-message;
animation-duration: 0.55s;
animation-fill-mode: both;
animation-timing-function: ease-in-out;
animation-delay: var(--delay);
transform-origin: left;
}
.message:nth-child(2n) {
align-self: flex-end;
background-color: #03A9F4;
color: white;
transform-origin: right;
}
@keyframes chat-scroll {
from {
transform: translateY(calc(-1 * (100% - var(--chat-height))));
}
3.12% {
transform: translateY(calc(-1 * (100% - var(--chat-height) - (var(--chat-height) / 3))));
}
6.25% {
transform: translateY(calc(-1 * (100% - var(--chat-height) - (var(--chat-height) / 3))));
}
9.37% {
transform: translateY(calc(-1 * (100% - var(--chat-height) - (var(--chat-height) / 1.5))));
}
12.5% {
transform: translateY(calc(-1 * (100% - var(--chat-height) - (var(--chat-height) / 1.5))));
}
15.62% {
transform: translateY(calc(-1 * (100% - var(--chat-height) - var(--chat-height))));
}
18.75% {
transform: translateY(calc(-1 * (100% - var(--chat-height) - var(--chat-height))));
}
21.87% {
transform: translateY(calc(-1 * (100% - var(--chat-height) * 2 - (var(--chat-height) / 3))));
}
25% {
transform: translateY(calc(-1 * (100% - var(--chat-height) * 2 - (var(--chat-height) / 3))));
}
28.12% {
transform: translateY(calc(-1 * (100% - var(--chat-height) * 2 - (var(--chat-height) / 1.5))));
}
31.25% {
transform: translateY(calc(-1 * (100% - var(--chat-height) * 2 - (var(--chat-height) / 1.5))));
}
34.37% {
transform: translateY(calc(-1 * (100% - var(--chat-height) * 2 - var(--chat-height))));
}
37.5% {
transform: translateY(calc(-1 * (100% - var(--chat-height) * 2 - var(--chat-height))));
}
40.62% {
transform: translateY(calc(-1 * (100% - var(--chat-height) * 3 - (var(--chat-height) / 3))));
}
43.75% {
transform: translateY(calc(-1 * (100% - var(--chat-height) * 3 - (var(--chat-height) / 3))));
}
46.87% {
transform: translateY(calc(-1 * (100% - var(--chat-height) * 3 - (var(--chat-height) / 1.5))));
}
50% {
transform: translateY(calc(-1 * (100% - var(--chat-height) * 3 - (var(--chat-height) / 1.5))));
}
53.12% {
transform: translateY(calc(-1 * (100% - var(--chat-height) * 3 - var(--chat-height))));
}
56.5% {
transform: translateY(calc(-1 * (100% - var(--chat-height) * 3 - var(--chat-height))));
}
59.6% {
transform: translateY(calc(-1 * (100% - var(--chat-height) * 4 - (var(--chat-height) / 3))));
}
62.5% {
transform: translateY(calc(-1 * (100% - var(--chat-height) * 4 - (var(--chat-height) / 3))));
}
65.62% {
transform: translateY(calc(-1 * (100% - var(--chat-height) * 4 - (var(--chat-height) / 1.5))));
}
69% {
transform: translateY(calc(-1 * (100% - var(--chat-height) * 4 - (var(--chat-height) / 1.5))));
}
72.12% {
transform: translateY(calc(-1 * (100% - var(--chat-height) * 4 - var(--chat-height))));
}
75.5% {
transform: translateY(calc(-1 * (100% - var(--chat-height) * 4 - var(--chat-height))));
}
78.62% {
transform: translateY(calc(-1 * (100% - var(--chat-height) * 5 - (var(--chat-height) / 3))));
}
82% {
transform: translateY(calc(-1 * (100% - var(--chat-height) * 5 - (var(--chat-height) / 3))));
}
85.12% {
transform: translateY(calc(-1 * (100% - var(--chat-height) * 5 - (var(--chat-height) / 1.5))));
}
88.5% {
transform: translateY(calc(-1 * (100% - var(--chat-height) * 5 - (var(--chat-height) / 1.5))));
}
91.62% {
transform: translateY(calc(-1 * (100% - var(--chat-height) * 5 - var(--chat-height))));
}
to {
transform: translateY(calc(-1 * (100% - var(--chat-height) * 5 - var(--chat-height))));
}
}
@keyframes show-message {
from {
transform: translateY(50%) rotate(15deg) scale(0);
}
}<div class="chat-wrapper">
<div class="chat">
<div class="message message_left" style="--delay: 14.7s">Один</div>
<div class="message message_right" style="--delay: 13.7s">Два</div>
<div class="message message_left" style="--delay: 12.7s">Три</div>
<div class="message message_right" style="--delay: 11.8s">Четыре</div>
<div class="message message_left" style="--delay: 10.8s">Пять</div>
<div class="message message_right" style="--delay: 9.9s">Шесть</div>
<div class="message message_left" style="--delay: 9s">Семь</div>
<div class="message message_right" style="--delay: 8s">Восемь</div>
<div class="message message_left" style="--delay: 7.1s">Девять</div>
<div class="message message_right" style="--delay: 6.2s">Десять</div>
<div class="message message_left" style="--delay: 5.3s">Одинадцать</div>
<div class="message message_right" style="--delay: 4.2s">Двенадцать</div>
<div class="message message_left" style="--delay: 3.4s">Тринадцать</div>
<div class="message message_right" style="--delay: 2.35s">Четырнадцать</div>
<div class="message message_left" style="--delay: 1.5s">Пятнадцать</div>
<div class="message message_right" style="--delay: 1s">Шестнадцать</div>
<div class="message message_right" style="--delay: 0.5s">Семнадцать</div>
<div class="message message_right" style="--delay: 0s">Восемнадцать</div>
</div>
</div>