非常简单的键入样式 - ityped

2017-01-06      1742      JavaScript
项目简介

iTyped

非常简单的键入样式,无依赖。

可以输入任何字符串,观察可得按照你设置的速度键入,退格键是如何键入的,以及无论你设置了多少字符串都要开始一个新的句子。

为什么使用iTyped?

  • iTyped 很小巧: 2.4kB
  • 无jQuery 依赖
  • 只需安装即可!

如果你想要渲染字符串,那么iTyped是你最好的选择。

安装

Npm:npm install ityped

CDN:https://unpkg.com/ityped@0.0.5

The Gist:

import { init } from 'ityped';

init(`#element`, {
  // required - for now, only accepting texts
    strings: ['Dead simple animated typing.', 'No dependencies'],
    //optional
    typeSpeed: 55, //default
    //optional
    backSpeed: 30, //default
    //optional
    startDelay: 500, //default
    //optional
    backDelay: 500, //default
    //optional
    loop: false, //default
    //optional    
    showCursor: true, //default
    //optional    
    cursorChar: "|", //default
    // optional callback called once the last string has been typed
    onFinished: function(){}
});

想要动画的闪烁光标?添加这个CSS并自定义即可。

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

API

初始化

/**
 * @name init
 * @description Init the typed animation
 * @param {String} element The Element that will receive the strings
 * @param {Object} config The typed configuration
 */

 init('#element', config);
<span id="element"></span>

iTyped 配置

/**
  * @name config
  * @description The initial typed configuration
  * @param {Array} strings An array with the strings that will be animated
  * @param {Integer} typeSpeed Typing speed
  * @param {Integer} backSpeed Backspacing speed
  * @param {String} cursorChar The value of cursor character
  * @param {Integer} backDelay Time before backspacing
  * @param {Integer} startDelay Time before typing starts
  * @param {Boolean} showCursor Show the cursor element
  * @param {Boolean} loop The animation loop
  * @param {Function} onFinished The callback that will be called (if `loop` is false) once the last word is decremented
  **/

  const config = {
    strings: ['Dead simple animated typing.', 'No dependencies'],
    //optional
    typeSpeed: 100, //default
    //optional
    backSpeed: 50, //default
    //optional
    startDelay: 500, //default
    //optional
    backDelay: 500, //default
    //optional    
    loop: false, //default
    //optional
    showCursor: true, //default
    //optional    
    cursorChar: "|", //default
    // optional callback called (if `loop` is false) once the
    // last string was typed
    onFinished: function(){},
  }