Dead simple Javascript animated typing, with no dependencies.
Switch branches/tags
Nothing to show
Clone or download
Luis Vinicius Luis Vinicius
Luis Vinicius and Luis Vinicius v1.0.3 browser module
Latest commit b8eaa86 Jun 8, 2018
Permalink
Failed to load latest commit information.
dist v1.0.2 - #39 #37 fixed garbage values brow Jun 7, 2018
img added next Dec 28, 2017
src v1.0.2 - #39 #37 fixed garbage values brow Jun 7, 2018
.DS_Store added next Dec 28, 2017
.babelrc first cmmiit = Dec 28, 2017
.gitignore merging Dec 28, 2017
LICENSE.md add MIT license Jan 7, 2017
Readme.md v1.0.3 browser module Jun 7, 2018
index.html v1.0.3 browser module Jun 7, 2018
package.json v1.0.3 browser module Jun 7, 2018
rollup.config.js merging Dec 28, 2017
yarn.lock 1.0.0 Dec 28, 2017

Readme.md

iTyped

npm package

Dead simple Animated typing, with no dependencies.

Demo ➞

Enter in any string, and watch it type at the speed you've set, backspace what it's typed, and begin a new sentence for however many strings you've set.


Features

  • iTyped has a tiny size: 2 kB.
  • iTyped has no jQuery dependency.
  • Just install and enjoy!
  • Placeholder input support.

At now, if you just need to render Strings, iTyped is the best solution for you.

Installation

NPM

npm install ityped

Yarn

yarn add ityped

Browser

https://unpkg.com/ityped@1.0.3

CSS

CSS animations are build upon initialzation in JavaScript. But, you can customize them at your will! These classes are:

/* Cursor */
.ityped-cursor {}

Want the animated blinking cursor?

.ityped-cursor {
    font-size: 2.2rem;
    opacity: 1;
    -webkit-animation: blink 0.3s infinite;
    -moz-animation: blink 0.3s infinite;
    animation: blink 0.3s infinite;
    animation-direction: alternate;
}

@keyframes blink {
    100% {
        opacity: 0;
    }
}

@-webkit-keyframes blink {
    100% {
        opacity: 0;
    }
}

@-moz-keyframes blink {
    100% {
        opacity: 0;
    }
}

Use with multiples instances at the same time

<span id="one"></span>
<span id="other"></span>
  import { init } from 'ityped'
  
  const oneElement = document.querySelector('#one')
  const otherElement = document.querySelector('#other')
  
  init(oneElement, { showCursor: false, strings: ['Nice', 'One' ] });
  init(otherElement, { disableBackTyping: true, strings: ['iTyped is', 'Awesome'] });

Use with React.js

  import React, { Component } from 'react'
  import { init } from 'ityped'
  
  export default class Hello extends Component {
    componentDidMount(){
      const myElement = document.querySelector('#myElement')
      init(myElement, { showCursor: false, strings: ['Use with React.js!', 'Yeah!' ] })
    }
    render(){
      return <div id="myElement"></div>
    }
  }

Customization

  init("#element", {
  
    /**
     * @param {Array} strings An array with the strings that will be animated 
     */
     strings: ['Put your strings here...', 'and Enjoy!']
    
    /**
     * @param {Number} typeSpeed Type speed in milliseconds
     */
     typeSpeed:  100,
   
    /**
     * @param {Number} backSpeed Type back speed in milliseconds
     */
     backSpeed:  50,
    
    /**
     * @param {Number} startDelay Time before typing starts
     */
     startDelay: 500,
    
    /**
     * @param {Number} backDelay Time before backspacing
     */
     backDelay:  500,
    
    /**
     * @param {Bollean} loop The animation loop
     */
     loop:       false,
    
    /**
     * @param {Bollean} showCursor Show the cursor element
     */
     showCursor: true,
    
    /**
     * @param {Bollean} placeholder Write the string in the placeholder content
     */
     placeholder: false,
    
    /**
     * @param {Bollean} disableBackTyping Disable back typing for the last string sentence 
     */
     disableBackTyping: false,
    
    /**
     * @property {String} cursorChar character for cursor
     */
     cursorChar: "|",
    
    
    // optional: The callback called (if `loop` is false) 
    // once the last string was typed
    /**
     * @property {Function} onFinished The callback called , if `loop` is false,
     * once the last string was typed
     */
    onFinished: function(){},
  }

Thanks for checking this out.

If you're using this, let me know! I'd love to see it.