Real-Typer

A JavaScrip|

Just include the CDN, and it starts typing


<script src="https://cdn.statically.io/gh/cyrus2281/Real-Typer/main/src/JavaScript/dist/real-typer.min.js"></script>

Simple Type

1 Lor|

const typer1 = new RealTyper.Typer(
  document.querySelector(".typer1"),
  [
    "1 Lorem ipsum sit amet",
    "2 consectetur elit.",
    "3 Doloremque, Officia quos."
  ]);
typer1.type();

Fast Type

1 Lorem ipsum sit a|

const typer2 = new RealTyper.Typer(
  document.querySelector(".typer1"),
  [
    "1 Lorem ipsum sit amet",
    "2 consectetur elit.",
    "3 Doloremque, Officia quos."
  ], {
    typeSpeed: 30,
    deleteSpeed: 20
  });
typer2.type();

Long Hold

|

const typer3 = new RealTyper.Typer(
  document.querySelector(".typer1"),
  [
    "1 Lorem ipsum sit amet",
    "2 consectetur elit.",
    "3 Doloremque, Officia quos."
  ], {
    holdDelay: 2500,
    pauseDelay: 2000,
    loopHold: 2500,
    startDelay: 1500
  });
typer3.type();

Single String

1 Lor|

const typer4 = new RealTyper.Typer(
  document.querySelector(".typer4"),
  "1 Lorem ipsum sit amet");
typer4.type();

Custom Cursor

1 Lor_

const typer5 = new RealTyper.Typer(
  document.querySelector(".typer5"),
  [
    "1 Lorem ipsum sit amet",
    "2 consectetur elit.",
    "3 Doloremque, Officia quos."
  ], {
    cursorCharacter: "_"
  });
typer5.type();

No Delete

1 Lor|

const typer6 = new RealTyper.Typer(
  document.querySelector(".typer6"),
  [
    "1 Lorem ipsum sit amet",
    "2 consectetur elit.",
    "3 Doloremque, Officia quos."
  ], {
    delete: false
  });
typer6.type();

No Loop

1 Lor

const typer7 = new RealTyper.Typer(
  document.querySelector(".typer7"),
  [
    "1 Lorem ipsum sit amet",
    "2 consectetur elit.",
    "3 Doloremque, Officia quos."
  ], {
    loop: false
    cursorCharacter: ''
  });
typer7.type();

Loop Start Index

1 Lor|

const typer8 = new RealTyper.Typer(
  document.querySelector(".typer8"),
  [
    "1 Lorem ipsum sit amet",
    "2 consectetur elit.",
    "3 Doloremque, Officia quos."
  ], {
    loopStartIndex: 1
  });
typer8.type();

No Delete last string & no loop

1 Lor|

const typer9 = new RealTyper.Typer(
  document.querySelector(".typer9"),
  [
    "1 Lorem ipsum sit amet",
    "2 consectetur elit.",
    "3 Doloremque, Officia quos."
  ], {
    deleteLastString: false,
    loop: false,
    cursorBlink: false
  });
typer9.type();

Callback Function

Lorem|

const typer10 = new RealTyper.Typer(
  document.querySelector(".typer10"),
  [
    "Lorem ipsum sit amet",
  ], {
    callback: (x) => console.log("Testing callback function"),
  });
typer10.type();

Callback with Arguments

Lorem|

const typer11 = new RealTyper.Typer(
  document.querySelector(".typer11"),
  [
    "Lorem ipsum sit amet",
  ], {
    callback: (args) => console.log(args),
    callbackArgs: ["string", true, 10]
  });
typer11.type();

Using Emitters to add text

|

const typer12 = new RealTyper.Typer(
  document.querySelector(".typer12"),
  [
    "Starting text",
  ], {
    deleteLastString: false,
    loop: false,
  });
window.randomText = " random text"
const {emit} = typer12.type();
setInterval(() => {
  emit(randomText, true)
}, 5000)