Делать было нечего - дело было вечером.

Сам толком не знал, что именно создаю. Сначала добавил комментарии с эффектами, потом занялся фоном… и как-то незаметно из этого вырос целый проект. Всё рождалось само собой , без чёткого плана, но с вдохновением.

Так появился информер, который работает через глобальный блок.

Для начала создаём глобальный блок - так будет удобнее работать.
После этого вставляем шаблон iPad.

Код

<!-- iPad контейнер -->
<div class="ipad-mockup">
  <div class="ipad-screen">

    <!-- Основной контент внутри экрана -->
    <div class="acesories">

<!-- Вывод комментарии через информер -->

    $MYINF_5$

<!-- Комментарии  -->

   </div>
  </div>

<div class="ipad-label">iPad</div>
</div>

<style>
/* iPad блок */
.ipad-mockup {
width: 768px;
max-width: 90vw;
height: 880px;
background: #1c1c1c;
border-radius: 40px;
box-shadow: 0 20px 60px rgba(0,0,0,0.5), inset 0 0 4px rgba(255,255,255,0.1);
position: relative;
margin: 40px auto;

/* Настраиваем внутренние отступы отдельно */
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 40px; /* <- увеличена нижняя рамка для надписи iPad */

display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}

.next-btn {
  text-decoration: none;
  padding: 12px 20px;
  border-radius: 25px;
  color: #fff;
  background: linear-gradient(135deg, #875bc7 0%, #54a4f3 100%);
  font-weight: 600;
  font-size: 14px;
  transition: all 0.25s ease;
}

.next-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(162, 77, 252, 0.5);
}

.comment {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* показываем максимум 3 строки */
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Вырез под камеру/динамик сверху с отступом */
.ipad-mockup::before {
  content: "";
  position: absolute;
  top: 8px;  /* увеличен отступ сверху, был 12px */
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 6px;
  background: #333;
  border-radius: 3px;
}

/* Экран планшета */
.ipad-screen {
width: 100%;
height: 100%;
background: radial-gradient(circle at top left, #0b0614, #11081f 80%);
border-radius: 30px;
overflow: hidden;
padding: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: center;
}

/* Надпись iPad снизу с настраиваемым отступом */
:root {
--ipad-label-bottom: 8px; /* изменяем это значение, чтобы регулировать позицию */
}

.ipad-label {
position: absolute;
bottom: var(--ipad-label-bottom);
width: 100%;
text-align: center;
font-family: "Segoe UI", sans-serif;
font-weight: 600;
font-size: 20px;
color: #bbb;
letter-spacing: 1px;
text-shadow: 0 0 4px rgba(0,0,0,0.6);
}

body {
background: radial-gradient(circle at top left, #0b0614, #11081f 80%);
font-family: "Segoe UI", sans-serif;
margin: 0px;
padding: 0;
justify-content: center; /* Центрируем по горизонтали */
align-items: flex-start; /* Не фиксируем по вертикали */
min-height: 100vh;
color: #fff;
}

/* Контейнер по центру с прокруткой*/
.acesories {
  position: relative;
  width: 780px;
  height: 970px;
  display: flex;
  flex-direction: column;       /* вертикальный поток комментариев */
  justify-content: flex-start;  /* прижимаем к верху */
  align-items: stretch;         /* растягиваем комментарии по ширине */
  
  background: radial-gradient(circle at top left, #1a0826, #0c0713 80%);
  border-radius: 12px;
  box-shadow: 0 0 30px rgba(120, 40, 180, 0.4);

  overflow-y: auto;             /* включаем вертикальный скролл */
  padding: 20px;                /* немного меньше, чем было 60px */
  margin: 10px auto;
}

/* Отступы между комментариями */
:root {
--comment-gap: 5px;
}

/* Комментарий */
.askolenada {
width: 93%;
display: flex;
align-items: center;
justify-content: space-between;
padding: 16px 28px 16px 160px;
background: linear-gradient(135deg, rgba(40, 20, 60, 0.9), rgba(30, 10, 50, 0.9));
border-radius: 100px 30px 30px 100px;
box-shadow: 0 8px 25px rgba(150, 70, 255, 0.25);
color: #fff;
font-size: 16px;
opacity: 0;
transform: translateY(50px);
position: relative;
margin-top: var(--comment-gap, 22px);
transition: transform 0.8s ease, opacity 0.8s ease;
animation: slideUp 1s ease forwards;
}

/* Анимация появления */
@keyframes slideUp {
from { opacity: 0; transform: translateY(60px); }
to { opacity: 1; transform: translateY(0); }
}

/* Задержки для упорядоченности */
.askolenada:nth-child(1) { animation-delay: 0.2s; }
.askolenada:nth-child(2) { animation-delay: 0.5s; }
.askolenada:nth-child(3) { animation-delay: 0.8s; }
.askolenada:nth-child(4) { animation-delay: 1.1s; }
.askolenada:nth-child(5) { animation-delay: 1.4s; }

/* Контейнер текста */
.text-wrapper {
display: flex;
flex-direction: column;
justify-content: flex-start;
text-align: left;
margin-left: calc(var(--text-left, -50px));
margin-top: calc(var(--text-top, 0px));
}

/* Ник */
.nickname {
font-weight: 700;
font-size: 18px;
color: #d4b9ff;
text-shadow: 0 0 8px rgba(180, 90, 255, 0.5);

/* Отступы */
margin-top: -8px; /* сверху */
margin-bottom: 0px; /* снизу */

}

/* Комментарий */
.comment {
font-size: 15px;
color: #f4f4f4;
line-height: 1.4;
text-shadow: 0 0 6px rgba(180, 120, 255, 0.25);
}

/* Аватар */
.askolenada .img {
height: 85px;
width: 85px;
position: absolute;
left: 20px;
top: 50%;
transform: translateY(-50%);
background: linear-gradient(145deg, #9a4dff, #692ac7);
border-radius: 50%;
padding: 5px;
box-shadow: 0 0 15px rgba(150, 70, 255, 0.5);

/* Отступы */
margin-top: 0px; /* сверху */
margin-bottom: 0px; /* снизу */
margin-left: -14px; /* слева */
}

.askolenada .img img {
height: 100%;
width: 100%;
border-radius: 50%;
object-fit: cover;
border: 2px solid rgba(255, 255, 255, 0.3);
}

/* Кнопка */
.askolenada a {
text-decoration: none;
padding: 14px 22px;
border-radius: 25px;
color: #fff;
background: linear-gradient(135deg, #a24dfc 0%, #5c26e0 100%);
font-weight: 600;
font-size: 15px;
transition: all 0.25s ease;
box-shadow: 0 0 12px rgba(162, 77, 252, 0.4);
}

.askolenada a:hover {
transform: scale(1.05);
box-shadow: 0 0 20px rgba(162, 77, 252, 0.7);
}

/* Эффект свечения */
.askolenada::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background: radial-gradient(circle at 80% 50%, rgba(200, 100, 255, 0.3), transparent 70%);
opacity: 0;
transition: opacity 0.5s ease;
}

.askolenada.active::after {
opacity: 1;
animation: glowTrail 1.8s ease-out;
}

@keyframes glowTrail {
0% { opacity: 1; filter: blur(6px); }
100% { opacity: 0; filter: blur(20px); }
}
</style>

<script>
const comments = document.querySelectorAll('.askolenada');
const visibleSlots = 4;
let queue = [...comments];
let active = [];

function showNext() {
  if (queue.length === 0) return;
  const comment = queue.shift();
  active.push(comment);

  comment.style.opacity = '1';
  comment.style.transform = `translateY(${active.indexOf(comment) * 85}px)`;
  comment.classList.add('active');

  if (active.length === visibleSlots) {
    setTimeout(() => hideFirst(), 10000);
  } else {
    setTimeout(showNext, 800);
  }
}

function hideFirst() {
  const first = active.shift();
  first.style.opacity = '0';
  first.style.transform = `translateY(-100%)`;

  if (queue.length > 0) {
    showNext();
  } else {
    queue.push(first);
    setTimeout(showNext, 500);
  }
}

showNext();

const commentGap = 85 + 8;
setInterval(() => {
  active.forEach((c, i) => {
    c.style.transform = `translateY(${i * commentGap}px)`;
  });
}, 300);
</script>

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

Пришлось искать обходное решение и в итоге всё решилось просто и элегантно:
через CSS я ограничил текст в три строки.
И всё- работает чётко, как часы.

Информер

Код

<div class="askolenada" onclick="window.location='$ENTRY_URL$';">
  <div class="keeping">
    <div class="img">
      <img src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>/post/noavatar.png<?endif?>" alt="" />
    </div>
    <div class="text-wrapper">
      <div class="nickname">$USERNAME$</div>
      <div class="comment">$MESSAGE$</div>
    </div>
  </div>
  <a href="$ENTRY_URL$" class="next-btn">Далее</a>
</div>

По самому информеру ограничений нет - можно выводить сколько угодно комментариев.

Он подгружает всё содержимое прямо в блок, а прокрутка при этом скрыта, но работает плавно и аккуратно.

Визуально блок остаётся статичным, хотя внутри всё тихо «живет» и листается.

Мурчанн

1