1 звезда на GitHub = 1 новый компонент.

Поставить звезду
Типографика typographyanimationtypewriter

Typewriter Effect

Эффект печатной машинки с набором текста и мигающим курсором.

Hello, World!

Использование

Скопируйте и вставьте этот код на вашу страницу Astro:

astro 
---
import { TypewriterEffect } from 'astro-component-kit';
---

<TypewriterText text="Sample text" speed="3s">Content</TypewriterText>
--- import { TypewriterEffect } from 'astro-component-kit'; --- <TypewriterText text="Sample text" speed="3s">Content</TypewriterText>

Ручная установка

Если вы не используете пакет npm, создайте файл и вставьте следующий код: src/components/lib/TypewriterEffect.astro:

astro 
---
interface Props { text: string; speed?: string; }
const { text, speed = '3s' } = Astro.props;
---
<div class="tw-wrap">
  <span class="tw-text" style={`--len: ${text.length}; --speed: ${speed}`}>
    {text}
  </span>
</div>
<style>
  .tw-wrap { display: inline-block; }
  .tw-text { display: block; overflow: hidden; white-space: nowrap; border-right: 3px solid #6366f1; color: #fff; font-family: monospace; font-size: 1.5rem; font-weight: 700; width: 0; animation: typing var(--speed) steps(var(--len)) forwards, blink 0.75s step-end infinite; }
  @keyframes typing { from { width: 0 } to { width: 100% } }
  @keyframes blink { from, to { border-color: transparent } 50% { border-color: #6366f1 } }
</style>
--- interface Props { text: string; speed?: string; } const { text, speed = '3s' } = Astro.props; --- <div class="tw-wrap"> <span class="tw-text" style={`--len: ${text.length}; --speed: ${speed}`}> {text} </span> </div> <style> .tw-wrap { display: inline-block; } .tw-text { display: block; overflow: hidden; white-space: nowrap; border-right: 3px solid #6366f1; color: #fff; font-family: monospace; font-size: 1.5rem; font-weight: 700; width: 0; animation: typing var(--speed) steps(var(--len)) forwards, blink 0.75s step-end infinite; } @keyframes typing { from { width: 0 } to { width: 100% } } @keyframes blink { from, to { border-color: transparent } 50% { border-color: #6366f1 } } </style>

Краткая информация

Категория
Типографика
Имя файла
TypewriterEffect.astro
Зависимости
Нет — чистый Astro + CSS
Теги
typographyanimationtypewriter