HTML Typewriter text – daktilo efekti yapmak

Günümüzde internete bağlanan cihazların, tarayıcıların, HTML ve CSS’in yetenekleri daha da geliştiği göze alındığında, eskiden birçok şeyi zor veya birçok ek kodlama ile yaparken şimdi çok daha basit ve temiz yapabiliyoruz. Typewriter text(daktilo efekti) da bunlardan biri.

https://wolkanca.com.tr/html-typewriter-text-daktilo-efekti-yapmak/

wolkanca.com.tr/html-typewriter-text-daktil..

Typerwriter with SVG

Hiçbir ek CSS ve JS kullanmadan yapılabilen Typewriter:

Hello world! Cool, eh?

Yeni Typewriter HTML Etiketi

HTML etiketi kullanarak yapılan Typewriter:

This is a typewriter effect!

It supports inner markdown elements.

The typing rate can be adjusted as well.

And here's a fancy cursor.

Rerun

:root { --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; --code-font: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace; --color-bg: hsl(0, 0%, 93%); --color-fg: hsl(0, 0%, 100%); --color-primary: 211, 69%, 57%; }

*, *::before, *::after { box-sizing: border-box; margin-top: 0; }

body { font-family: var(--font); padding: 0.5em; background: var(--color-bg); }

section { font-size: 1.5em; background-color: var(--color-fg); padding: 1em; border-radius: 0.25em; border: 0.0625em solid hsla(var(--color-primary), 1); box-shadow: 0.125em 0.125em 0.25em hsla(0, 0%, 0%, 0.15) inset; position: relative; margin: 0 0 1rem; }

button { font-family: var(--font); font-size: 0.75em; border-radius: 0.25em; border: none; padding: 0.625em 1.125em; color: var(--color-fg); text-transform: uppercase; letter-spacing: 0.0625em; box-shadow: 0 0.25em 0.25em -0.125em rgba(0, 0, 0, 0.25); cursor: pointer; background: hsl(var(--color-primary)); }

button:hover { box-shadow: 0 0.25em 0.25em -0.125em rgba(0, 0, 0, 0.25), 0 0 0 3em rgba(0, 0, 0, 0.2) inset; }

button:active, button[disabled] { box-shadow: 0 0 0 3em rgba(0, 0, 0, 0.3) inset; }

button[disabled] { pointer-events: none; opacity: 0.5; }

section button { position: absolute; font-size: 0.667em; bottom: 0.25em; right: 0.25em; }

.special { font-size: 1.25em; color: maroon; }

.fancy .typewritten-text_character::after, .fancy .typewritten-text_start::after { border-right: none; border-bottom: 0.125em solid red; width: 1ch; right: -1ch; }

document.getElementById('rerun').onclick = () => { document.querySelectorAll('typewritten-text').forEach(elem => { elem.start() }) }

document.querySelectorAll('typewritten-text').forEach(elem => { elem.addEventListener('typewritten-text:phraseremoved', () => { setTimeout(elem.start, elem.phraseInterval) }) })

HTML standardı, geliştiricilerin Web Bileşenleri aracılığıyla özel öğeler tanımlamasına olanak tanır . Yeni bir öğe oluşturmak sadece bir avuç Javascript gerektirir, oradan gerektiği kadar çok veya az işlevsellik tanımlamanıza izin verir.

class MyElement extends HTMLElement {
  // code for how the element looks and behaves
}

window.customElements.define('my-element', MyElement)

typewritten-textElemanın, semantik esnek ve yeniden daktilo bileşenini sağlamak için tasarlanmış, bu tür bir ağ bileşeni!

Web bileşenleri yerel tarayıcı teknolojisi olduğundan, kutudan çıktığı gibi sevgili çerçevelerimizin çoğuyla çalışmak içindir (size bakıldığında, React …) . Onlarla ilgili en sevdiğim şeylerden biri de bu!

Elbette, geliştirici deneyimi bazen… acı verici olabilir. Bu masum küçük unsurun, tüm hedeflerime ulaşmak için başlangıçta düşündüğümden çok daha zor olduğu ortaya çıktı .

`typewritten-text` Eleman

Javascript arenaya girdiğinde, temelde her şey mümkün hale gelir.

Monospace gereksinimlerine gerek yok! İç metin herhangi bir yazı tipi veya boyutta olabilir; Aslında, isterseniz yazı tiplerini karıştırabilir.
Daha uzun bir veya iki cümle yazmak istiyorsanız yerleşik çok satırlı destek.
Çok basit bir arayüz; temelde herhangi bir standart HTML etiketi gibi kullanabilirsiniz.

Ve elbette, mümkün olduğunca erişilebilir hale getirmek için çaba harcadım.

Yazılı mevcut durumdan bağımsız olarak metin içeriğini temsil eder, özellikle Assistive Technologies kullananlar için faydalıdır.
Azaltılmış hareketi tercih eden kişiler için yanıp sönen imleç animasyonu devre dışı bırakılır .
İçerik değiştirme de yok! Öğenin boyutu her zaman içeriğinin boyutudur.

Belki de en ilginç özelliği olaylarıdır . Öğe, karakterler yazıldığında veya tümcecik bittiğinde olayları gönderir. Bu olayları dinleyerek, daktiloya istediğiniz herhangi bir özel davranışı yaptırmak için kodun büyüsünü kullanabilirsiniz!

Örneğin, daktiloyla yazılmış başka bir metin başlatmak:

first.addEventListener('typewritten-text:phrasetyped', () => {
    second.start()
})

İşte typewritten-textbileşenle yapabileceğiniz birkaç şık şey !

Daktilo Döngüsü

Etkinlikleri kullanarak , yazmak için farklı metinler arasında geçiş yapmak kolaydır.

Have you tried our

fresh salads? 🥗
hearty burgers? 🍔
delicious pies? 🥧

.typewriter-cycle { display: inline-block; position: relative; list-style: none; padding: 0; width: 20ch; margin: 0; }

.typewriter-cycle li:not(:first-child) { position: absolute; top: 0; left: 0; }

typewritten-text { font-weight: bold; }

typewritten-text:not(.active) .typewritten-text_start::after { visibility: hidden; }

*, *::before, *::after { box-sizing: border-box; margin-top: 0; }

body { font-family: var(--font); padding: 0.5em; background: var(--color-bg); }

document.querySelectorAll('.typewriter-cycle').forEach(cycle => { const items = cycle.querySelectorAll('typewritten-text') for (let i = 0; i < items.length; ++i) { const cur = items[i] const next = items[i === items.length - 1 ? 0 : i + 1]

cur.addEventListener('typewritten-text:phrasetyped', () => setTimeout(cur.start, cur.phraseInterval))
cur.addEventListener('typewritten-text:phraseremoved', () => {
  cur.classList.remove('active')
  next.classList.add('active')
  setTimeout(next.start, next.phraseInterval)
})

} })

typewritten-textO devir etkisi yerleşik nedeni budur mümkün olduğunca çok yönden, hem de kullanılabilir, böylece eleman çok temel olacak şekilde tasarlanmıştır. Yine de, efekti kapsüllemek için farklı bir web bileşeni yapılabilir!

Karakter İletişim Kutusu

Karakterler de bir daktilo animasyonu ile konuşma eğilimindedir!

Hit Rerun çerçevenin altındaki animasyon tekrar eder.

Janet

Hi! I'm Janet, the new gal on the team. What's your name?

I'm Dinesh, the UI designer. The first thing you should know is our team lead is always at least five minutes late.

Dinesh

:root { --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; --color-bg: hsl(0, 0%, 93%); --color-fg: hsl(0, 0%, 100%); }

*, *::before, *::after { box-sizing: border-box; margin-top: 0; }

body { font-family: var(--font); padding: 0.5em; background: var(--color-bg); }

article { max-width: 50rem; margin: auto; }

img { width: 100%; display: block; }

blockquote { margin: 0; }

figure { margin: 0 1rem; }

section { display: flex; flex-direction: column; align-items: flex-start; width: 100%; margin-bottom: 1em; }

section figure { flex: 0 1 33%; max-width: 10rem; margin-bottom: 1em; }

section figcaption { text-align: center; }

section blockquote { font-size: 1.25rem; flex: 1; position: relative; background: var(--bubble); padding: 1em; border-radius: 0.5em; position: relative; }

section blockquote::after { content: ''; background: var(--bubble); position: absolute; width: 1em; height: 1em; left: 1.2em; top: -0.2em; transform: skew(-20deg, -20deg); }

section.flipped figure { align-self: flex-end; }

section.flipped img { transform: scaleX(-1); }

section.flipped blockquote::after { top: auto; left: auto; right: 1.2em; bottom: -0.2em; transform: skew(-20deg, -20deg); }

.typewritten-text_character::after, .typewritten-text_start::after { display: none; }

@media screen and (min-width: 32rem) { section { flex-direction: row; }

section blockquote::after { top: auto; right: auto; left: -0.2em; bottom: -0.2em; transform: skew(-20deg, -20deg); }

section.flipped blockquote::after { top: auto; right: -0.2em; left: auto; bottom: -0.2em; transform: skew(20deg, 20deg); } }

const janet = document.querySelector('#janet typewritten-text') const dinesh = document.querySelector('#dinesh typewritten-text')

janet.addEventListener('typewritten-text:phrasetyped', () => { setTimeout(dinesh.start, dinesh.phraseInterval) })

Daha fazlası

typewritten-text Bileşenin nasıl kurulacağı ve kullanılacağı ile ilgili tüm bilgiler github’da bulunabilir!

GitHub logosu Auroratide / typewritten-text(daktiloyla yazılmış metin)

Performs a typewriter effect on the selected piece of text!

Örnekler: auroratide.github.io/typewritten-text/

HTML Typewriter text – daktilo efekti yapmak

HTML ile Typewriter(daktilo efekti) metin yapmak yönetimleri üzerine.

Typerwriter with SVG

Yeni Typewriter HTML Etiketi

typewritten-text Eleman

Daktilo Döngüsü

Karakter İletişim Kutusu

Daha fazlası

`typewritten-text` Eleman