⌨️ Yazma Efekti Oluşturucu
Animasyonlu daktilo metin efektleri oluşturun
80ms
Daktilo Efekti Oluşturucu
Daktilo efekti oluşturucu — web için daktilo metin efekti aracı — kelimelerinizi canlı daktilo animasyonuyla önizler: harfler tek tek belirir, yanıp sönen imleçle — ve aynı efekti kendi sitenize eklemeniz için eksiksiz CSS kodunu verir. Yukarıda hızı, imleç tarzını ve rengi ayarlayın, yazışı izleyin, kodu kopyalayın.
Öne çıkanlar
- Canlı terminal tarzı önizleme: metniniz yanıp sönen imleçle harf harf yazılır.
- Yazma hızı (karakter başına 20–200 ms), 3 imleç tarzı ve 7 renk kontrolü.
- Klasik
steps()daktilo tekniğiyle kopyala-yapıştır CSS üretir — sitenizde JavaScript gerekmez. - Efekt saf CSS animasyonudur: seçilebilir, SEO dostu gerçek metin.
- Tamamen tarayıcınızda çalışır — hiçbir şey yüklenmez.
Daktilo efekti nedir?
Daktilo efekti, metni harf harf açığa çıkaran, genelde sonda yanıp sönen imleçle gerçek zamanlı yazıyı taklit eden animasyondur. Klasik web uygulaması yalnızca CSS kullanır: steps() zamanlama işlevi, metnin görünür genişliğini kesikli, karakter boyutunda sıçramalarla ilerletir; yanıp sönen border-right imleç görevi görür. Tanıtım bölümlerinin, terminal temalı sayfaların ve sohbet robotu tarzı arayüzlerin vazgeçilmezidir.
Bu daktilo efekti oluşturucu nasıl çalışır?
Bu sayfadaki önizleme, JavaScript kullanarak metninizi seçtiğiniz hızda terminal tarzı bir kutuya yazar — hızlı patlama için karakter başına 20 ms, ölçülü ağır yazı için 200 ms. Üç imleçten birini (blok, alt çizgi ya da yok) ve klasik terminal yeşili dahil yedi renkten birini seçersiniz. Her değişiklik önizlemenin altındaki daktilo efekti kodunu yeniden üretir.
Üretilen kod dürüst, standart daktilo tarifidir: white-space: nowrap ile overflow: hidden, karakter sayınıza eşit steps() ile width'i 0'dan %100'e animasyonlayan typing kareleri ve kenarlık rengini açıp kapatan blink kareleri. Süre metin uzunluğunuz ve hızınızdan hesaplanır; CSS önizlemeyle birebir eşleşir. Stil dosyanıza yapıştırın, typing-effect sınıfını uygulayın; animasyon sıfır JavaScript ile çalışır.
Uygulamalı örnek: yazma animasyonu kodu
Girdi: karakter başına 80 ms'de Hello, world! → şöyle bir CSS üretir (13 karakter için süre otomatik 1.0 sn hesaplanır):
| Ayar | Bu örnekteki değer | Ne değiştirir? |
|---|---|---|
| Hız | 80 ms/karakter | Animasyon süresi (13 karakter → 1.0 sn) |
| İmleç | Blok | border-right yanıp sönen çubuk |
| Renk | Terminal yeşili (#0f0) | Metin ve imleç rengi |
| Teknik | steps(13, end) | Karakter başına bir kesikli sıçrama |
steps() sayısı hep metin uzunluğunuza eşittir — harflerin kayarak değil tek tek belirmesini sağlayan budur.
Bu araç nasıl kullanılır?
- Yukarıdaki giriş alanına metninizi yazın.
- Yazma önizlemesini izlemek için Başlat'a basın; hız, imleç tarzı ve rengi ayarlayın.
- Yazma animasyonu kopyala-yapıştır için Kodu Kopyala'ya tıklayın — üretilen CSS panonuza kopyalanır.
- Stil dosyanıza yapıştırın ve metin öğenize
class="typing-effect"ekleyin.
Daktilo efektleri nerede en iyi çalışır?
Daktilo animasyonları kısa, yüksek etkili satırlarda parlar: tanıtım manşetleri ("We build websites."), terminal temalı portföyler, sohbet robotu karşılamaları ve yükleme durumu mesajları. Hareket + aşamalı açığa çıkarma doğası gereği izlenir olduğundan dikkati odaklar. Ölçekte çöker — paragrafları, gezinmeyi ya da kullanıcıların hızlı taraması gereken hiçbir şeyi daktilo animasyonuna sokmayın. Tekniğin kısıtını da not edin: white-space: nowrap efektin tek satırlara uygun olduğu anlamına gelir; çok satırlı daktilo efektleri satır başına sarmalayıcı ya da JavaScript yaklaşımı ister.
Sınırlamalar
Açık konuşalım. Üretilen CSS yalnızca tek satırlıktır — uzun metin kaydırılmak yerine kabından taşar; girdileri kısa tutun ya da kendi duyarlı çözümünüzü ekleyin. steps() sayısı tam karakter sayınıza gömülüdür; metni sonra düzenlerseniz kodu yeniden üretmelisiniz. Efekt sosyal medyaya kopyala-yapıştır yapılamaz — tüm CSS gibi yalnızca stil dosyalarının çalıştığı yerde işler. Hareketi azaltmayı tercih eden ziyaretçiler için animasyonu @media (prefers-reduced-motion: no-preference) arkasına alın. Ekran okuyucular metnin tamamını bir anda okur (sorun değil) — bilgiyi sıralamak için animasyona güvenmeyin.
Daktilo efekti ve alternatifler
| Yöntem | Ne için ideal? | Neye dikkat? |
|---|---|---|
| Bu oluşturucu | Kopyala-yapıştır CSS daktilo, sıfır bağımlılık | Tek satır; sabit karakter sayısı |
| Animasyonlu metin oluşturucu | Gökkuşağı, neon, glitch, sıçrama CSS efektleri | Farklı efekt ailesi |
| JavaScript yazma kütüphaneleri (Typed.js) | Çok satırlı, döngülü, silmeli diziler | Bağımlılık ekler; JS açık gerekir |
| Video düzenleyiciler | Sosyal videolarda daktilo metni | Canlı metin değil video dışa aktarır |
Sıkça Sorulan Sorular
Web sitesine daktilo efekti nasıl eklenir?
Metninizi yukarıdaki oluşturucuya yazın, hızı, imleci ve rengi ayarlayın, üretilen CSS'i kopyalayın. Stil dosyanıza yapıştırın ve öğeye class="typing-effect" ekleyin — JavaScript gerekmez.
CSS daktilo efekti nasıl çalışır?
Öğenin genişliğini karakter başına bir adımlı steps() kullanarak 0'dan %100'e animasyonlar; harfler tek tek belirir. Yanıp sönen border-right imleç görevi görür. Metin gerçek, seçilebilir HTML olarak kalır.
Yazma animasyonunu Instagram ya da TikTok'ta kullanabilir miyim?
Hayır. CSS animasyonları yalnızca stil dosyalarının çalıştığı yerde işler — sosyal uygulamalarda değil, web sitelerinde. Sosyal video için efekti bir video düzenleyicide yeniden yapıp video olarak dışa aktarın.
Hangi yazma hızları mevcut?
Kaydırıcı karakter başına 20 ms (çok hızlı) ile 200 ms (yavaş ve ölçülü) arasında çalışır; varsayılan 80 ms'dir. Üretilen CSS süresi tam metin uzunluğunuz ve seçtiğiniz hızdan hesaplanır.
Hangi imleç tarzlarını seçebilirim?
Üç: yanıp sönen blok çubuk (klasik terminal imleci), alt çizgi imleç ya da hiç imleç yok. Terminal yeşilinden beyaza, camgöbeğine ve macentaya yedi renk mevcut.
Daktilo efekti SEO'ya zarar verir mi?
Hayır. Metin arama motorlarının tam okuduğu sıradan HTML'dir — animasyon tamamen sunumsaldır. Metni videoya gömmeye göre gerçek bir avantajdır.
Üretilen CSS ile uzun metin neden taşıyor?
Teknik, genişliği karakter adımlarıyla ölçmek için white-space: nowrap ister; bu yüzden yalnızca tek satırları destekler. Daktilo metnini kısa manşetlerde tutun ya da çok satırlı diziler için JavaScript kütüphanesi kullanın.
Efekti nasıl erişilebilir yaparım?
Animasyonu @media (prefers-reduced-motion: no-preference) içine alın; harekete duyarlı ziyaretçiler statik metin görür. Ekran okuyucular metnin tamamını bir anda okur; kısa satırlarda kabul edilebilir.
Metnim bir yere yükleniyor mu?
Hayır. Önizleme ve CSS üretimi ikisi de tarayıcınızda çalışır. Sunucuya hiçbir şey gönderilmez.
Daha fazla metin efekti: gökkuşağı, neon ve glitch CSS animasyonları için animasyonlu metin oluşturucu ve dijital yağmur estetiği için matrix metin oluşturucu — hepsi eğlenceli metin araçları koleksiyonumuzda.