Typed.js 开源项目教程
typed.jsA JavaScript Typing Animation Library项目地址:https://gitcode.com/gh_mirrors/ty/typed.js
1. 项目的目录结构及介绍
Typed.js 项目的目录结构如下:
typed.js/
├── assets/
├── dist/
├── docs/
├── src/
├── .codeclimate.yml
├── .esdoc.json
├── .gitignore
├── .prettierrc
├── .travis.yml
├── CODE_OF_CONDUCT.md
├── LICENSE.txt
├── README.md
├── index.d.ts
├── index.html
├── logo-cropped.png
├── logo.png
├── package-lock.json
├── package.json
└── typed.d.ts
目录介绍:
- assets/: 存放项目相关的静态资源文件。
- dist/: 存放编译后的文件,用于生产环境。
- docs/: 存放项目的文档文件。
- src/: 存放项目的源代码文件。
- .codeclimate.yml: CodeClimate 配置文件。
- .esdoc.json: ESDoc 配置文件。
- .gitignore: Git 忽略文件配置。
- .prettierrc: Prettier 代码格式化配置。
- .travis.yml: Travis CI 配置文件。
- CODE_OF_CONDUCT.md: 行为准则文件。
- LICENSE.txt: 项目许可证文件。
- README.md: 项目说明文件。
- index.d.ts: TypeScript 类型定义文件。
- index.html: 项目示例页面。
- logo-cropped.png: 项目标志图片。
- logo.png: 项目标志图片。
- package-lock.json: npm 依赖锁定文件。
- package.json: 项目配置文件,包含依赖、脚本等信息。
- typed.d.ts: TypeScript 类型定义文件。
2. 项目的启动文件介绍
Typed.js 的启动文件主要是 index.html
和 src/typed.js
。
index.html
index.html
文件是一个示例页面,展示了如何使用 Typed.js 库。在这个文件中,你可以看到如何引入 Typed.js 库以及如何配置和初始化 Typed.js。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Typed.js Demo</title>
<link rel="stylesheet" href="assets/demo.css">
<script src="dist/typed.umd.js"></script>
</head>
<body>
<div class="wrap">
<h1>Typed.js</h1>
<span id="typed"></span>
</div>
<script>
var typed = new Typed('#typed', {
stringsElement: '#typed-strings',
typeSpeed: 0,
backSpeed: 0,
backDelay: 500,
startDelay: 1000,
loop: false,
onBegin: function(self) {
prettyLog('onBegin ' + self);
},
onComplete: function(self) {
prettyLog('onComplete ' + self);
},
preStringTyped: function(pos, self) {
prettyLog('preStringTyped ' + pos + ' ' + self);
},
onStringTyped: function(pos, self) {
prettyLog('onStringTyped ' + pos + ' ' + self);
},
onLastStringBackspaced: function(self) {
prettyLog('onLastStringBackspaced ' + self);
},
onTypingPaused: function(pos, self) {
prettyLog('onTypingPaused ' + pos + ' ' + self);
},
onTypingResumed: function(pos, self) {
prettyLog('onTypingResumed ' + pos + ' ' + self);
},
onReset: function(self) {
prettyLog('onReset ' + self);
},
onStop: function(pos, self) {
prettyLog('onStop ' + pos + ' ' + self);
},
onStart: function(pos, self) {
prettyLog('onStart ' + pos + ' ' + self);
},
typed.jsA JavaScript Typing Animation Library项目地址:https://gitcode.com/gh_mirrors/ty/typed.js