cdn加载插件和npm安装的差别_web开发：打字机效果插件Typed.js

本文同步发表在我的个人博客中：

沧沧凉凉www.cclliang.com

打字机效果是非常酷的文字显示效果，视觉表现极佳，而通过Typed.js可以很简单的在web开发中实现打字机效果。

1. 官网

JavaScript Animated Typing with Typed.jsmattboldt.com

2. 安装

# With NPM
npm install typed.js# With Yarn
yarn add typed.js# With Bower
bower install typed.js

2.1 CDN

<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11"></script>

3. 使用

3.1 HTML部分

<span id="typed" style="white-space: pre-wrap;line-height: 30px;"></span>

经过测试文字放在span标签里面，输入的光标才会正常显示。

3.2 JavaScript部分

const options = {strings: ['First test.','Second test, nit will pause for three seconds. ^3000',"Second test, nthe last sentence will go back to 'Second test, ', noh no, this is the third test. ^1000","It's going to start repeating.",],typeSpeed: 50, // 打印速度startDelay: 300, // 开始之前的延迟300毫秒loop: true, // 是否循环
};const typed = new Typed('#typed', options);

效果

3.3 更多参数

该插件可以配置很多参数，具体的参数可以参考官方文档，或者参考下面的文章：

【前端库】typed.js打字机效果_老程-CSDN博客blog.csdn.net

4. vue中的使用

该插件对vue做了一次封装：

vue-typed-jsgithub.com

4.1 安装

npm install --save vue-typed-js

4.2 使用

非常简单，按照文档一步一步集成就可以了。

注意：vue-typed-js没有声明文件，所以在TypeScript中使用会报错，而Typed.js是有声明文件的，可以直接在TypeScript中使用。

5. 总结

总而言之使用Typed.js实现打字机效果非常的简单，简单到不需要用太多语言去进行描述。

cdn加载插件和npm安装的差别_web开发：打字机效果插件Typed.js相关推荐

cdn加载插件和npm安装的差别_免费、快速且可靠的开源CDN-jsDelivr
jsDelivr 是一款公共免费的 CDN,提供稳定的 CDN,可在流量巨大的流行网站上进行使用,没有带宽限制,任何人都可以完全免费使用支持 npm.GitHub.WordPress,这里说一些操作 ...
Node.js学习笔记——模块加载机制及npm指令详解
文章目录二.模块化 1.模块化的基本概念 2.Node.js 中的模块化 Node.js 中模块的分类加载模块 Node.js 中的模块作用域向外共享模块作用域中的成员 Node.js 中的模块 ...
Vite 配置 cdn 加载资源
一.介绍上篇文章我们从零配置 Vite + Vue3.0 开发环境.生产环境,本篇文章我们配置 CDN 加载.因为 Vite 不会重写从外部文件导入的内容,我们需要使用支持 ESM 编译的 CDN. ...
R包库安装及数据加载：一次安装多个R包、一次加载多个R包
R包库安装及数据加载:一次安装多个R包.一次加载多个R包目录 R包库安装及数据加载 R包安装一次安装多个R包加载需要的R包
后端：静态资源放在cdn cdn涵义 cdn加载
小程序提交不能超过2M,但是小程序的图标文件基本上都会有个4M以上.故采用cdn加速域名 <image src="https://cdn1.chinayarn.com/xcx/img/ ...
如何从CDN加载jQuery？
下面是从所有3个CDN加载jQuery的代码. //下面是从所有3个CDN加载jQuery的代码. 从Google CDN加载jQuery Framework的代码 <script type=& ...
关于IDEA2020.1插件市场加载不出来无法安装插件的解决办法
今天安装Lombok插件发现插件市场加载不出来,试了很多解决方法都以失败告终,最后在踩了很多坑后终于通过本地磁盘加载这个方法成功解决了,下面介绍一下我的安装方法,如果有和我一样情况的大兄弟可以参考一下 ...
cdn加载vue很慢_Vue.js 项目打包优化实践
首先上结果: 把常用的 Vue,router,vuex,axios 的 runtime 包拆分了出来,改为 cdn: 另外就是对于自己编写的业务代码进行分包,根据路由进行懒加载,可以较好的提高首屏加载 ...
服务器虚拟光驱无法加载,Proxmox/创建PVE/安装windows 2012r2系统无法识别硬盘/如何添加virtio驱动/...
前面一遍文章写了proxmox如何创建centos7系统的小鸡儿,那proxmox如何创建windows系统的小鸡儿呢?尤其是当我们小鸡的硬盘设置成virtio SCSI的时候,这时候windows ...