straversi / typer.js Goto Github PK

View Code? Open in Web Editor NEW

131.0 3.0 23.0 1.02 MB

Typing effect completely configurable in HTML.

Home Page: http://steven.codes/typerjs

License: MIT License

HTML 70.57% JavaScript 20.34% CSS 9.09%

typing typer typewriter javascript html

typer.js's Introduction

Typer.js

Typing effect completely configurable in HTML

Live page: http://steven.codes/typerjs

<h1>
  I love
  <span class="typer" id="first-typer" data-words="beets,bears,battlestar galactica" data-colors="#cd2032,#cc1e81,#6e6abb"></span>
  <span class="cursor" data-owner="first-typer"></span>
</h1>
<script async src="https://unpkg.com/[email protected]/typer.js"></script>

Never touch the JavaScript if you don't want to.

Features

You're in control of:

Keystroke delay and variance
Time between deletion of words
Cursor display
Color of each word
Pausing and playing the effect

Common bugs

Make sure to load the script after the final usage of Typer.js in your HTML. Due to how browsers parse HTML, a script is guaranteed access to all of the DOM elements that precede the script tag that loaded it. There's no harm in adding the async attribute to your script tag, so that the browser resumes parsing your HTML file while it fetches Typer.js!

typer.js's People

Contributors

Stargazers

Watchers

typer.js's Issues

How to write variable.

Hello!
It's not a real issue, but more like a "please help me" situation.

I'm trying to code some sort of terminal where the user is prompted for the name, but I don't know how to print the variable.

<h2>
        <!--Code for the text-->
        <span class="typer" id="recovery_mode"
        data-words="Booting into recovery mode...,Computer: Who... who are you?,Computer: Hello..."+name+"..."
        data-delay="100"
        data-colors="red, gray, gray"
        data-loop="1"></span>

        <!--Code for the cursor-->
        <span class="cursor"
        data-owner="main"></span>
    </h2>

   name = prompt("Who are you?")

I know, this repository hasn't been getting issues for quite some time, but I'll give it a shot.

OS License Type

Hi,

Would it be possible to clarify under what license is this code released? My best guess would be MIT but i couldn't find any reference anywhere (i apologize if i missed anything but i also looked at the website but couldn't find). It would be extremely helpful if you can clarify or add the license file in the root folder

Thanks Much,
Gagan

NPM package

this is really nice and exactly what I want. It would be amazing if this existed as an npm package

General improvements

I created this script a while ago more toward the beginnings of my javascript journey. I'm revisiting it lately to make some updates.

Some things I want to do:

refactor to modern javascript, and add a build step to transform it to ES5 for browser support for those who want it
add a minification build step
write some tests
?

data-deleteDelay

If I understand correct then this setting would allow a word to be fully typed for x-amount of time before its deleted and a new work is made aint that correct? I´ve tried to insert a value here: www.getskillup.com. But no matter how high a value nothing changes.