Появление текста
Печатает и стирает
Фразы печатаются с живым темпом, стираются и сменяются по кругу.
Подождите полный цикл.
Сайты, которые
Код
Сайты, которые <span class="typed"
data-phrases="продают|запоминаются|летают"></span><i class="cursor"></i>
<style>
.cursor { display: inline-block; width: 3px; height: .95em;
background: #E84B16; animation: b .8s steps(1) infinite; }
@keyframes b { 50% { opacity: 0; } }
</style>
<script>
var el = document.querySelector(".typed");
var list = el.getAttribute("data-phrases").split("|");
var pi = 0, ci = 0, del = false;
(function tick() {
var w = list[pi];
if (!del) {
el.textContent = w.slice(0, ++ci);
if (ci === w.length) { del = true; return setTimeout(tick, 1600); }
return setTimeout(tick, 55 + Math.random() * 45); // живой темп
}
el.textContent = w.slice(0, --ci);
if (ci === 0) { del = false; pi = (pi + 1) % list.length;
return setTimeout(tick, 350); }
setTimeout(tick, 28);
})();
</script>
Промпт для ИИ
Сделай ротатор с печатью (typed.js-паттерн): список фраз в data-phrases через |; цикл: печать по букве с живым темпом 55-100мс (добавляй Math.random), пауза 1.6s на дочитывание, стирание по 28мс, пауза 0.35s, следующая фраза по кругу. Рядом мигающий курсор-палочка (steps(1), 50% opacity 0). Акцентный цвет для печатаемого слова. При prefers-reduced-motion показать первую фразу статично.