typeplay

    0.0.1 • Public • Published

    TypePlay.js

    TypePlay is a JavaScript library that help the user create a visual effect - to type text like a real person would.

    alt text

    Install TypePlay

    Install using NPM, GIT or just hotlink the script.

    From NPM:

    npm install typeplay --save

    From GIT:

    git clone ...
    npm update
    npm run build

    From a Hotlink

    <script src="https://path_to_github/dest/iife/TypePlay.min.js"></script>

    CSS

    The blinking cursor is a "|" character position and animated using css. Depending on your choice of font-family and font-size you might need to modify the left and margin-right properties. Adjust until blinking cursor stops dislocating the characters around it.

    @keyframes blink {
        0%   {opacity: 1;}
        49%  {opacity: 1;}
        50%  {opacity: 0;}
        99%  {opacity: 0;}
        100% {opacity: 1;}
    }
     
    .typePlayBlinker {
        position: relative;
        left: -5px;
        margin-right: -12px;
        animation-name: blink;
        animation-duration: 1.2s;
        animation-iteration-count: infinite;
    }

    Initialization

    TypePlay comes in CJS and IIFE formats pre-build:

    IIFE

    If you would like to just add it in your browser and use it straight away use any of the IIFE version:

    <script src="https://path_to_github/dest/iife/TypePlay.js"></script>
    <script src="https://path_to_github/dest/iife/TypePlay.min.js"></script>
    CJS

    If you would like to package it together with other scripts in your App using Webpack or any other alternatife use the CJS version:

    import {TypeWrapper} from './dest/js/TypeWrap';
    import TypePlay from "TypePlay";
     
    let element = document.getElementById("scene");
    let typer = new TypePlay(element, {typeSpeed: {min: 90, max: 240}});
    typer
        .wait(2500)
        .eraseAll()
        .type("PHP develo")
        .eraseAll()
        .wait(600)
        .type("JavaScript Dev")
        .eraseAll()
        .wait(620)
        .type("Software Developer")
        .wait(10000)
        .repeat()
        .play();
     

    Digging a little deeper

    If you dig a little deeper into the source you will notice that there are 2 classes - TypePlay and TypeWrap. The second is there only to provide the chainability. Building the TypePlay source (the index.js file) will result in building TypeWrap.

    Install

    npm i typeplay

    DownloadsWeekly Downloads

    1

    Version

    0.0.1

    License

    ISC

    Unpacked Size

    21.3 kB

    Total Files

    10

    Last publish

    Collaborators

    • stoilivanov