想实现前端酷炫的打字机效果吗
实现酷炫的打字机效果插件typed.js
前言:
最近在写前端项目的过程中,在逛别人的优质的个人博客的时候,发现一个好玩有趣的东西。看下图,类似在打字的效果,然后又在思考的感觉,感觉整个网页都充满了思想。于是我就去百度这种效果怎么实现。
有很多原生的实现办法,但几乎都是js在操作Dom元素,但是我是在vue项目上编写的,显然不妥。这个时候发现了typed.js,他会在vue使用的时候多封装了一层,使得不是操作dom。现在分享下这个插件。
一、typed.js的介绍
typed.js是一个类型化库,效果是用打字机的方式显示一段话,可以自定义任何字符串、指定显示速度、指定是否循环等
如下图官方(作者)演示。
其实可以使用原生JS来实现这个效果,但是还是很麻烦的
typed.js是一个轻量级的JavaScript插件, 用于实现页面文字的打字动画效果
这是一款轻量级,使用简单,功能强大的插件。
二、typed.js的使用
1. 环境准备
- 在原生html中
只需要引入CDN
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
- 在vue中
安装依赖
npm install --save vue-typed-js
2. 使用
原生html
最简单使用
<body><span class="box"></span>
</body>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>var typed = new Typed(".box", {strings: ["欢迎来到我的博客", "你是最棒的"],//输出的文字typeSpeed: 200,//打字的速度});
</script>
效果:
输入暂停
可以通过转义字符^1000
在字符串中间暂停一段时间。
<body><span class="box"></span>
</body>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>var typed = new Typed(".box", {//在了后面停顿三秒strings: ["让我想一下是谁来看我了^3000", "原来是你呀老铁"],typeSpeed: 200,//打字的速度});
</script>
智能退格
会智能回退到前一句重复的地方
<body><span class="box"></span>
</body>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>var typed = new Typed(".box", {//会智能回退到前一句重复的地方strings: ["我明天想吃面条", "我明天想吃烤冷面","我明天什么都想吃"],typeSpeed: 100,//打字的速度});
</script>
效果:
改变光标的样式
通过cursorChar: '_',
属性来改变光标的样式
批量键入
通过转义字符``来包括需要批量展示的数据或者文字。
会有一段文字不是通过打印出来的,而是突然完整的出现,会有一种提问打字,机器问答的感觉。
<body><span class="box"></span>
</body>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>var typed = new Typed(".box", {strings: ["热爱永远热泪盈眶", "只要累不死,就卷死他人","未来可期"],typeSpeed: 100,//打字的速度smartBackspace: true, // 开启智能退格 默认falsecursorChar: '♡',backSpeed: 50,//后退速度backDelay: 500,//后退延迟loop:true,//是否循环startDelay:1000,//起始时间fadeOut:true,//淡出效果});
</script>
效果:
静态 HTML 的字符串 (SEO 友好)
可以在页面上放置HTML div并从中读取,而不是使用strings数组来插入字符串。这允许机器人、搜索引擎以及禁用JavaScript的用户,在页面上查看您的文本。
<body><div id="typed-strings"><p>你像 <strong>天外来物一样 </strong> 求之不得</p><p>你在世俗的名字里, </em><em>不重要了。</em> --薛之谦</p></div><span id="typed"></span>
</body>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>
var typed = new Typed('#typed', {stringsElement: '#typed-strings',typeSpeed: 200,//打字的速度});
</script>
效果:
其他常用的属性
这里我只列举了我用的多的,还有更多的属性在文章结尾。
<body><span class="box"></span>
</body>
<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.12"></script>
<script>var typed = new Typed(".box", {strings: ["欢迎来到我的博客", "送你一句话","未来可期"],typeSpeed: 100,//打字的速度smartBackspace: true, // 开启智能退格 默认falsebackSpeed: 50,//后退速度backDelay: 500,//后退延迟loop:false,//是否循环 默认falsestartDelay:1000,//起始时间fadeOut:true,//淡出效果});
</script>
效果:
更多属性看作者的完整文档
在Vue中使用
前面讲了这么多是在原生html中使用的,属性是相同的,只是使用的时候有点区别。而且该插件在vue中使用多封装了一层,使得我们不用自己去操作Dom。
在main.js中全局导入并使用
import Vue from 'vue'
import VueTypedJs from 'vue-typed-js'Vue.use(VueTypedJs)
用法
要开始使用,只需将vue-typed-js自定义元素添加到template然后传递文本,该文本应输入到strings属性。 另外,您需要将具有类typing的元素传递到插槽,它将用作wrapper 。
最简单的使用
<template><vue-typed-js :strings="['这是我的博客', '我是浪漫主义码农','欢迎各位大佬来访']"><h1 class="typing"></h1></vue-typed-js>
</template><script>
export default {};
</script><style>
</style>
效果:
属性
直接在vue-typed-js自定义标签上加属性就行,全部的属性如下:
属性 | 类型 | 描述 | 用法 |
---|---|---|---|
strings | 数组 | 要输入的字符串 |
:strings="['Text 1', 'Text 2']"
|
stringsElement | 串 | 包含字符串子元素的元素的ID |
:stringsElement="'myId'"
|
typeSpeed | 数 | 输入速度(以毫秒为单位) |
:typeSpeed="50"
|
startDelay | 数 | 开始输入之前的时间(以毫秒为单位) |
:startDelay="1000"
|
backSpeed | 数 | 退格速度(以毫秒为单位) |
:backSpeed="10"
|
smartBackspace | 布尔型 | 仅退格与上一个字符串不匹配的内容 |
:smartBackspace="true"
|
shuffle | 布尔型 | 洗弦(打乱语句的输出顺序) |
:shuffle="true"
|
backDelay | 数 | 退格前的时间(以毫秒为单位) |
:backDelay="100"
|
fadeOut | 布尔型 | 淡出而不是退格 |
:fadeOut="true"
|
fadeOutClass | 串 | 淡入淡出动画CSS类 |
:fadeOutClass="'fadeOutClass'"
|
fadeOutDelay | 布尔型 | 淡出延迟(以毫秒为单位) |
:fadeOutDelay="true"
|
loop | 布尔型 | 循环字符串 |
:loop="true"
|
loopCount | 数 | 循环次数 |
:loopCount="3"
|
showCursor | 布尔型 | 显示光标 |
:showCursor="true"
|
cursorChar | 串 | 光标字符 |
:cursorChar="'_'"
|
autoInsertCss | 布尔型 | 将游标CSS插入并将HTML淡出 |
:autoInsertCss="true"
|
attr | 串 | 用于输入Ex的属性:输入占位符,值或仅HTML文本 |
:attr="'placeholder'"
|
bindInputFocusEvents | 布尔型 | 如果el是文本输入,则绑定到焦点并模糊 |
:bindInputFocusEvents="true"
|
contentType | 串 | 纯文本格式为“ html”或“ null” |
:contentType="'html'"
|
最后放一个加了点样式的打字机吧
<template><div><vue-typed-jsclass="mao":strings="['这是我的博客<br/>我是浪漫主义码农<br/>欢迎各位大佬来访','这是我的博客<br/>我是浪漫主义码农<br/>送大家一句话','这是我的博客<br/>我是浪漫主义码农<br/>博观而约取,厚积而薄发。<br/><h2>Romantic until death</h2>',]":cursorChar="'☜'":typeSpeed="100":backSpeed="50":autoInsertCss="true"><h1 class="typing"></h1></vue-typed-js></div>
</template><script>
export default {};
</script><style>
.mao {position: relative;left: 35%;-webkit-background-clip: text;background-clip: text;background-image: linear-gradient(rgb(255, 255, 0), rgb(0, 255, 255));-webkit-text-fill-color: transparent;
}
</style>
效果:
三、写在最后
如果是在其它项目中使用的话:
在ReactJS使用参考
查看此示例在组件中使用Typed.js的React app
在Vue使用参考
在vue中使用typed.js
用作WebComponent
WebComponent:
typed.js作者网站:www.mattboldt.com
点个赞再走吧~~~~
想实现前端酷炫的打字机效果吗相关推荐
- 赞!15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- js实现酷炫倒计时动画效果
前段时间和朋友去音乐餐厅吃饭,中间有个活动,然后看到他们软件公众号H5有个活动开始的倒计时的动画效果,于是想了下实现思路. <!DOCTYPE html> <html> < ...
- html5霓虹效果代码,纯CSS实现酷炫的霓虹灯效果(附demo)
最近关注了油管上的 CSS Animation Effects Tutorial 系列,里面介绍了非常多有意思的 CSS 动效.其中第一个就是很酷炫的霓虹灯效果,这里就实现思路做一个简单的记录和分享. ...
- 一分钟搞定触手app主页酷炫滑动切换效果
代码地址如下: http://www.demodashi.com/demo/12826.html 前言: 前几天在看手机直播的时候,自己就用上了触手app.一进到主页就看上了里面页面切换的效果,自己想 ...
- Flutter 制作一个具有酷炫液体滑动效果的酷炫入门页面
本文主要介绍如何使用 Flutter 制作一个具有酷炫液体滑动效果的酷炫入门页面 我将向您展示如何使用 Flutter 制作一个具有酷炫液体滑动效果的酷炫入门页面,所以不用多说,让我们开始吧.在本课程 ...
- android 自定义酷炫ViewPager切换效果
Android 自定义特效酷炫ViewPager切换效果,当ViewPager切换时,下面的自定义页面标识图也跟着做动画切换, 效果图如下: 具体代码如下: 自定义ViewPager适配器如下: pa ...
- 前端酷炫效果参考_纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...
- 前端酷炫效果参考_2020年大前端发展趋势
迅速发展的前端开发,在每⼀年,都为开发者带来了新的关键词.2019 年已步⼊尾声,2020 年前端发展的关键词⼜将有哪些呢?发展的方向又会是什么呢?参考2019年大前端的发展,不出意外,前端依旧会围绕 ...
- Python制作酷炫的动画效果
1 引言 利用Python的Matplotlib-Animation库可以制作酷炫的数学公式动画,官方教程可访问链接. 本文为了清晰说明如何利用Animation类来实现动画效果,这里采用介绍一个点沿 ...
最新文章
- 手把手教你安装深度学习软件环境(附代码)
- 为什么下载源码包需要到官网上去下载?
- MongoDB数据库基本操作笔记
- 找对象不能只看TA的外表
- 手机单选按钮 html5,@html剃刀单选按钮mvc5(@html razor radio buttons mvc5)
- php把二维数组变为一维,如何将PHP二维数组转换为一维数组
- 当鼠标移入时切换背景图时闪烁的问题
- linux如何让普通用户有root权限
- NUC1840 Graveyard Design【尺取法】
- java----EL表达式
- Jumpserver代码规范
- adb shell 操作
- Python告诉你咪蒙10w+文章标题的秘密
- ibm入职测试题太难了_IBM面试的IQ测试题
- WZOI-314石头剪子布
- SSH常见问题及其解决方法
- python自动化接口_Python接口自动化——Web接口
- 终极计算机配置要求,《看门狗》PC版终极配置要求 i7+GTX780+8G包爽
- Pygame从0实战8(泡泡小游戏)
- 计算机视觉与图像处理