Là một dự án mã nguồn mở, mattboldt/typed.js đã đạt 16.3k sao trên GitHub, ngôn ngữ JavaScript. A JavaScript Typing Animation Library
Tóm tắt dựng từ metadata GitHub của chính dự án — chưa có bài review TopGit. Trang sẽ tự động cập nhật khi bài review đầy đủ được xuất bản.
VÌ SAO CHƯA CÓ REVIEW
TopGit viết bài đầy đủ cho repo có nhiều sao nhất và được yêu cầu nhiều nhất. Trang này là snapshot trong thời gian chờ — xem README gốc ở tab READ ME.
Live Demo | View All Demos | View Full Docs | mattboldt.com
Typed.js is a library that types. 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.
Licensing
GPL-3.0 License
Limited Commercial License
Unlimited Commercial License
Free for use on personal and open source projects
View License
For use on a single commercial project
Purchase License
View License
For use on unlimited commercial projects
Purchase License
View License
Installation
For use with a build tool like Vite, and/or in a React application, install with NPM or Yarn.
NPM
npm install typed.js
Yarn
yarn add typed.js
General ESM Usage
import Typed from 'typed.js';
const typed = new Typed('#element', {
strings: ['<i>First</i> sentence.', '& a second sentence.'],
typeSpeed: 50,
});
ReactJS Usage
import React, { useEffect, useRef } from 'react';
import Typed from 'typed.js';
function MyComponent() {
// Create reference to store the DOM element containing the animation
const el = useRef(null);
useEffect(() => {
const typed = new Typed(el.current, {
strings: ['<i>First</i> sentence.', '& a second sentence.'],
typeSpeed: 50,
});
return () => {
// Destroy Typed instance during cleanup to stop animation
typed.destroy();
};
}, []);
return (
<div className="App">
<span ref={el} />
</div>
);
}
<!-- Element to contain animated typing -->
<span id="element"></span>
<!-- Load library from the CDN -->
<script src="https://unpkg.com/[email protected]/dist/typed.umd.js"></script>
<!-- Setup and start animation! -->
<script>
var typed = new Typed('#element', {
strings: ['<i>First</i> sentence.', '& a second sentence.'],
typeSpeed: 50,
});
</script>
</body>
More complex hook-based function component: https://jsfiddle.net/mattboldt/60h9an7y/
Class component: https://jsfiddle.net/mattboldt/ovat9jmp/
Use with Vue.js
Check out the Vue.js component: https://github.com/Orlandster/vue-typed-js
Use it as WebComponent
Check out the WebComponent: https://github.com/Orlandster/wc-typed-js
Wonderful sites that have used (or are using) Typed.js
https://forwardemail.net
https://codesignal.com
https://github.com/features/package-registry
https://slack.com
https://envato.com
https://gorails.com
https://productmap.co
https://www.typed.com
https://apeiron.io
https://git.market
https://commando.io
http://testdouble.com/agency.html
https://www.capitalfactory.com
http://www.maxcdn.com
https://www.powerauth.com
Strings from static HTML (SEO Friendly)
Rather than using the strings array to insert strings, you can place an HTML div on the page and read from it.
This allows bots and search engines, as well as users with JavaScript disabled, to see your text on the page.
<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>
Type Pausing
You can pause in the middle of a string for a given amount of time by including an escape character.
var typed = new Typed('#element', {
// Waits 1000ms after typing "First"
strings: ['First ^1000 sentence.', 'Second sentence.'],
});
Smart Backspacing
In the following example, this would only backspace the words after "This is a"
var typed = new Typed('#element', {
strings: ['This is a JavaScript library', 'This is an ES6 module'],
smartBackspace: true, // Default value
});
Bulk Typing
The following example would emulate how a terminal acts when typing a command and seeing its result.
var typed = new Typed('#element', {
strings: ['git push --force ^1000\n `pushed to origin with option force`'],
});
CSS
CSS animations are built upon initialization in JavaScript. But, you can customize them at your will! These classes are:
/* Cursor */
.typed-cursor {
}
/* If fade out option is set */
.typed-fade-out {
}
Customization
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) => {},
});
Contributing
View Contribution Guidelines
end
Thanks for checking this out. If you have any questions, I'll be on Twitter.
If you're using this, let me know! I'd love to see it.
It would also be great if you mentioned me or my website somewhere. www.mattboldt.com
Trang TopGit này là một snapshot — tab "Readme" hiển thị nguyên văn README của repo (đã bỏ link, giữ ảnh). Repo GitHub ở github.com/mattboldt/typed.js là nguồn chính thức.
mattboldt/typed.js có bao nhiêu sao?
mattboldt/typed.js có 16.3k sao GitHub — tải lại trang để xem số mới nhất, hoặc xem trực tiếp github.com/mattboldt/typed.js. TopGit phản chiếu số sao của GitHub nhưng không cam kết đến từng phút.
mattboldt/typed.js có tag gì không?
Bản đồng bộ chưa ghi nhận topic GitHub nào cho mattboldt/typed.js. GitHub topics hiển thị ở thanh bên phải trang repo — đó là nơi đáng kiểm tra nhất.
mattboldt/typed.js có trang demo không?
Dự án có trang chủ ở http://www.mattboldt.com/demos/typed-js/. Tab "Readme" ở trang này thường có ảnh chụp và hướng dẫn bắt đầu nhanh.
mattboldt/typed.js còn đang phát triển không?
Commit gần nhất trên mattboldt/typed.js là 6 tháng trước (theo timestamp GitHub). Repo có 1.8k fork — một chỉ báo về mức độ quan tâm của cộng đồng.
mattboldt/typed.js viết bằng ngôn ngữ gì?
mattboldt/typed.js chủ yếu viết bằng JavaScript. Trường "language" của GitHub dựa trên phần lớn byte ở nhánh mặc định.
Đọc đầy đủ README ở tab phía trên.
Chưa chắc typed.js có hợp với bạn?
Để ChatGPT, Claude hoặc Perplexity tìm hiểu giúp — bấm bên dưới và xem AI nói gì về typed.js.
/typed.js
