Typed.js
一个 JavaScript 打字动画库
Typed.js 是一个类型库。输入任何字符串,然后观察它以您设置的速度输入,退格输入的内容,然后为您设置的任意多个字符串开始一个新句子。
npm install typed.js
yarn add typed.js
bower install typed.js
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
这就是您真正需要开始的全部。
// Can also be included with a regular script tag
import Typed from 'typed.js';
var options = {
strings: ['<i>First</i> sentence.', '& a second sentence.'],
typeSpeed: 40
};
var typed = new Typed('.element', options);
基于Hook-based的函数组件:https ://jsfiddle.net/mattboldt/60h9an7y/
class组件: https://jsfiddle.net/mattboldt/ovat9jmp/
查看 Vue.js 组件:https://github.com/Orlandster/vue-typed-js
查看 WebComponent:https ://github.com/Orlandster/wc-typed-js
https://github.com/features/package-registry
http://testdouble.com/agency.html
https://www.capitalfactory.com/
strings
您可以在页面上放置一个 HTML div
并从中读取,而不是使用数组来插入字符串。这允许机器人和搜索引擎以及禁用 JavaScript 的用户在页面上看到您的文本。
<script>
var typed = new Typed('#typed', {
stringsElement: '#typed-strings'
});
</script>
<div id="typed-strings">
<p>Typed.js is a <strong>JavaScript</strong> library.</p>
<p>It <em>types</em> out sentences.</p>
</div>
<span id="typed"></span>
您可以通过包含转义字符在字符串中间暂停一段给定的时间。
var typed = new Typed('.element', {
// Waits 1000ms after typing "First"
strings: ['First ^1000 sentence.', 'Second sentence.']
});
在下面的示例中,这只会退格“This is a”之后的单词
var typed = new Typed('.element', {
strings: ['This is a JavaScript library', 'This is an ES6 module'],
smartBackspace: true // Default value
});
以下示例将模拟终端在键入命令并查看其结果时的行为方式。
var typed = new Typed('.element', {
strings: ['git push --force ^1000\n `pushed to origin with option force`']
});
CSS 动画建立在 JavaScript 的初始化之上。但是,您可以随意自定义它们!这些类是:
/* Cursor */
.typed-cursor {
}
/* If fade out option is set */
.typed-fade-out {
}
var typed = new Typed('.element', {
/**
* @property {array} strings strings to be typed
* @property {string} stringsElement ID of element containing string children
*/
strings: [
'These are the default values...',
'You know what you should do?',
'Use your own!',
'Have a great day!'
],
stringsElement: null,
/**
* @property {number} typeSpeed type speed in milliseconds
*/
typeSpeed: 0,
/**
* @property {number} startDelay time before typing starts in milliseconds
*/
startDelay: 0,
/**
* @property {number} backSpeed backspacing speed in milliseconds
*/
backSpeed: 0,
/**
* @property {boolean} smartBackspace only backspace what doesn't match the previous string
*/
smartBackspace: true,
/**
* @property {boolean} shuffle shuffle the strings
*/
shuffle: false,
/**
* @property {number} backDelay time before backspacing in milliseconds
*/
backDelay: 700,
/**
* @property {boolean} fadeOut Fade out instead of backspace
* @property {string} fadeOutClass css class for fade animation
* @property {boolean} fadeOutDelay Fade out delay in milliseconds
*/
fadeOut: false,
fadeOutClass: 'typed-fade-out',
fadeOutDelay: 500,
/**
* @property {boolean} loop loop strings
* @property {number} loopCount amount of loops
*/
loop: false,
loopCount: Infinity,
/**
* @property {boolean} showCursor show cursor
* @property {string} cursorChar character for cursor
* @property {boolean} autoInsertCss insert CSS for cursor and fadeOut into HTML <head>
*/
showCursor: true,
cursorChar: '|',
autoInsertCss: true,
/**
* @property {string} attr attribute for typing
* Ex: input placeholder, value, or just HTML text
*/
attr: null,
/**
* @property {boolean} bindInputFocusEvents bind to focus and blur if el is text input
*/
bindInputFocusEvents: false,
/**
* @property {string} contentType 'html' or 'null' for plaintext
*/
contentType: 'html',
/**
* Before it begins typing
* @param {Typed} self
*/
onBegin: (self) => {},
/**
* All typing is complete
* @param {Typed} self
*/
onComplete: (self) => {},
/**
* Before each string is typed
* @param {number} arrayPos
* @param {Typed} self
*/
preStringTyped: (arrayPos, self) => {},
/**
* After each string is typed
* @param {number} arrayPos
* @param {Typed} self
*/
onStringTyped: (arrayPos, self) => {},
/**
* During looping, after last string is typed
* @param {Typed} self
*/
onLastStringBackspaced: (self) => {},
/**
* Typing has been stopped
* @param {number} arrayPos
* @param {Typed} self
*/
onTypingPaused: (arrayPos, self) => {},
/**
* Typing has been started after being stopped
* @param {number} arrayPos
* @param {Typed} self
*/
onTypingResumed: (arrayPos, self) => {},
/**
* After reset
* @param {Typed} self
*/
onReset: (self) => {},
/**
* After stop
* @param {number} arrayPos
* @param {Typed} self
*/
onStop: (arrayPos, self) => {},
/**
* After start
* @param {number} arrayPos
* @param {Typed} self
*/
onStart: (arrayPos, self) => {},
/**
* After destroy
* @param {Typed} self
*/
onDestroy: (self) => {}
});
感谢您查看此内容。如果您有任何问题,我会在Twitter上。
如果你正在使用这个,请告诉我!我很想看看。
如果您在某处提到我或我的网站,那就太好了。www.mattboldt.com