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

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

 
iTyped

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

  • LATEST
  • RELATED
  • POPULAR