با TailwindCSS در 5 دقیقه جلوه ماشین تحریر بسازید

انیمیشن های ماشین تحریر اغلب با جاوا اسکریپت انجام می شوند. اما، ما به راحتی می توانیم با TailwindCSS به یکی برسیم.

ماشین تحریر ساده

Tailwind Play: https://play.tailwindcss.com/17LendGXa0

CSS

<h1 class="relative w-[max-content] font-mono
before:absolute before:inset-0 before:bg-white
before:animate-typewriter
">Hello World</h1>

این قطعه کد ماشین تحریر را تولید می کند. فراموش نکنید که انیمیشن ماشین تحریر را در زیر اضافه کنید!

برای اینکه به درستی کار کند، رنگ پس‌زمینه عنصر شبه «قبل از» را رنگ پس‌زمینه پشت آن قرار دهید.

از آنجایی که متن ابتدا باید نامرئی باشد، h1 توسط عنصر شبه “قبل” پوشانده می شود. با انیمیشن متن گام به گام آشکار می شود. شما باید از فونت Monospace استفاده کنید تا وقتی متن آشکار می شود چیزی به هم نریزد.

پیکربندی TailwindCSS (tailwind.config.js)

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      animation: {
        typewriter: "typewriter 2s steps(11) forwards"
      },
      keyframes: {
        typewriter: {
          to: {
            left: "100%"
          }
        }
      }
    },
  },
  plugins: [],
}

در فایل tailwind.config.js انیمیشن ماشین تحریر را اضافه می کنیم. با خیال راحت مدت زمان را تغییر دهید. من آن را به عنوان 2 ثانیه انتخاب کردم.

شما فقط باید مقدار ‘steps(n)’ را تغییر دهید، جایی که ‘n’ نشان دهنده تعداد حروف است (از جمله فضای خالی!).

بنابراین “Hello World” 11 حرف است، بنابراین من مراحل را نوشتم (11).

اضافه کردن یک حفاظ

(بله، به خط عمودی چشمک زن Caret می گویند)

Tailwind Play: https://play.tailwindcss.com/FSWpXQA9Dg

CSS

<h1 class="relative w-[max-content] font-mono
before:absolute before:inset-0 before:animate-typewriter
before:bg-white
after:absolute after:inset-0 after:w-[0.125em] after:animate-caret
after:bg-black">Hello World</h1>

Caret عنصر شبه “بعد” است. در حالی که متن در حال نوشتن است، مانند یک کارت واقعی پلک نمی‌زند.

پیکربندی TailwindCSS (tailwind.config.js)

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      animation: {
        typewriter: 'typewriter 2s steps(11) forwards',
        caret: 'typewriter 2s steps(11) forwards, blink 1s steps(11) infinite 2s',
      },
      keyframes: {
        typewriter: {
          to: {
            left: '100%',
          },
        },
        blink: {
          '0%': {
            opacity: '0',
          },
          '0.1%': {
            opacity: '1',
          },
          '50%': {
            opacity: '1',
          },
          '50.1%': {
            opacity: '0',
          },
          '100%': {
            opacity: '0',
          },
        },
      },
    },
  },
  plugins: [],
}

در فایل tailwind.config.js، فریم های کلیدی چشمک زن و انیمیشن caret را اضافه می کنیم.

انیمیشن caret ابتدا کارت را مانند ماشین تحریر متحرک می کند تا جلوی متن قرار گیرد. پس از اتمام انیمیشن ماشین تحریر، انیمیشن چشمک زدن شروع می شود. به این دلیل که 2 ثانیه تاخیر دارد که مدت زمان انیمیشن ماشین تحریر نیز می باشد.

امیدوارم که آن را مفید یافتید!