Kategoriler
Kodlama

HTML Typewriter text – daktilo efekti yapmak

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

  • Volkan Yılmaz
  • Yazı tarihi
typewritten-text
typewritten-text

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.

Typerwriter with SVG

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

<svg viewBox="0 0 250 20" xmlns="http://www.w3.org/2000/svg">
  <g>
    <text font-family="monospace" fill="black" x="0" y="15">Hello world!</text>
    <rect fill="white" x="0" y="0" width="0" height="20">
      <animate attributeName="x" values="0 ; 96 ; 96 ; 0" dur="3s" repeatCount="indefinite"/>
      <animate attributeName="width" values="96; 0; 0; 96" dur="3s" repeatCount="indefinite"/>
    </rect>
    <rect fill="black" x="0" y="4" width="1" height="12">
      <animate attributeName="x" values="0 ; 96 ; 96 ; 0" dur="3s" repeatCount="indefinite"/>
      <animate attributeName="width" calcMode="discrete" values="1; 0" dur="1s" repeatCount="indefinite"/>
    </rect>
  </g>
</svg>

<svg viewBox="0 0 250 20" xmlns="http://www.w3.org/2000/svg">
  <g>
    <text font-family="monospace" fill="black" x="0" y="15" clip-path="inset(0 0 0 0) fill-box">Cool, eh?</text>
    <rect fill="white" x="0" y="0" width="0" height="20">
      <animate attributeName="x" calcMode="discrete" values="0; 8; 16; 24; 32; 40; 48; 56; 64; 72; 72; 64; 56; 48; 40; 32; 24; 16; 8; 0" dur="3s" repeatCount="indefinite"/>
      <animate attributeName="width" calcMode="discrete" values="72; 64; 56; 48; 40; 32; 24; 16; 8; 0; 0; 8; 16; 24; 32; 40; 48; 56; 64; 72" dur="3s" repeatCount="indefinite"/>
    </rect>
    <rect fill="black" x="0" y="4" width="1" height="12">
      <animate attributeName="x" calcMode="discrete" values="0; 8; 16; 24; 32; 40; 48; 56; 64; 72; 72; 64; 56; 48; 40; 32; 24; 16; 8; 0" dur="3s" repeatCount="indefinite"/>
      <animate attributeName="width" calcMode="discrete" values="1; 0" dur="1s" repeatCount="indefinite"/>
    </rect>
  </g>
</svg>

<!--
<svg viewBox="0 0 300 20" xmlns="http://www.w3.org/2000/svg">
  <g>
    <text font-family="monospace" fill="black" x="0" y="15" clip-path="inset(0 0 0 0) fill-box">Firefox only
      <animate attributeName="clip-path" values="inset(0 100% 0 0) ; inset(0 0 0 0) ; inset(0 0 0 0) ; inset(0 100% 0 0)" keyTimes="0 ; 0.4 ; 0.6 ; 1" dur="3s" repeatCount="indefinite"/>
    </text>
    <rect fill="black" x="0" y="4" width="1" height="12">
      <animate attributeName="x" values="0 ; 96 ; 96 ; 0" keyTimes="0 ; 0.4 ; 0.6 ; 1" dur="3s" repeatCount="indefinite"/>
      <animate attributeName="width" calcMode="discrete" values="1; 0" dur="1s" repeatCount="indefinite"/>
    </rect>
  </g>
</svg>
-->

Yeni Typewriter HTML Etiketi

<typewritten-text> HTML etiketi kullanarak yapılan Typewriter:

<link rel="stylesheet" href="https://unpkg.com/@auroratide/typewritten-text/lib/style.css"/>
<script type="module" src="https://unpkg.com/@auroratide/typewritten-text/lib/define.js"></script>

<section>
  <p>This is a <typewritten-text><strong>typewriter effect!</strong></typewritten-text></p>
  <p>It supports <typewritten-text><em>inner</em> <strong>markdown</strong> <span class="special">elements</span>.</typewritten-text></p>
  <p>The typing rate <typewritten-text letter-interval="25">can be adjusted as well.</typewritten-text></p>
  <p>And here’s a <typewritten-text class="fancy">fancy cursor.</typewritten-text></p>
  <button id="rerun">Rerun</button>
</section>
: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.

<link rel="stylesheet" href="https://unpkg.com/@auroratide/typewritten-text/lib/style.css"/>
<script type="module" src="https://unpkg.com/@auroratide/typewritten-text/lib/define.js"></script>

<section>
  <div class="sentence">
    <span>Have you tried our</span>
    <ul class="typewriter-cycle">
      <li><typewritten-text>fresh salads? 🥗</typewritten-text></li>
      <li><typewritten-text paused>hearty burgers? 🍔</typewritten-text></li>
      <li><typewritten-text paused>delicious pies? 🥧</typewritten-text></li>
    </ul>
  </div>
</section>
.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;
}

: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;
}
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.

<link rel="stylesheet" href="https://unpkg.com/@auroratide/typewritten-text/lib/style.css"/>
<script type="module" src="https://unpkg.com/@auroratide/typewritten-text/lib/define.js"></script>

<article>
  <section id="janet" style="--bubble: #ADCEDD;">
    <figure>
      <img src="https://i.imgur.com/W1l95nt.png" alt="A girl with brown hair and blue eyes."/>
      <figcaption>Janet</figcaption>
    </figure>
    <blockquote><typewritten-text letter-interval="50">Hi! I’m <strong>Janet</strong>, the new gal on the team. What’s your name?</typewritten-text></blockquote>
  </section>
  <section id="dinesh" class="flipped" style="--bubble: #CCB8B3;">
    <blockquote><typewritten-text letter-interval="50" paused>I’m <strong>Dinesh</strong>, the UI designer. The first thing you should know is our team lead is always <em>at least</em> five minutes late.</typewritten-text></blockquote>
    <figure>
      <img src="https://i.imgur.com/HVReWxe.png" alt="A boy with black hair and brown eyes."/>
      <figcaption>Dinesh</figcaption>
    </figure>
  </section>
</article>
: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!
Performs a typewriter effect on the selected piece of text!

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