【Javascript】シンプルなJavascriptアニメーションタイピングiTyped

Javascript

iTyped

January 12, 2017

iTypedはシンプルなJavascriptのアニメーションタイピング。

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>

MIT

Latest Posts

Related Posts