想实现前端酷炫打字机效果吗？ |
您所在的位置：网站首页 › Newtechnology后端插件 › 想实现前端酷炫打字机效果吗？ |
想实现前端酷炫打字机效果吗？
|
实现酷炫的打字机效果插件typed.js
本文已参与「掘力星计划」，赢取创作大礼包，挑战创作激励金。 前言： 最近在写前端项目的过程中，在逛别人的优质的个人博客的时候，发现一个好玩有趣的东西。看下图，类似在打字的效果，然后又在思考的感觉，感觉整个网页都充满了思想。于是我就去百度这种效果怎么实现。
有很多原生的实现办法，但几乎都是js在操作Dom元素，但是我是在vue项目上编写的，显然不妥。这个时候发现了typed.js，他会在vue使用的时候多封装了一层，使得不是操作dom。现在分享下这个插件。 typed.js是一个类型化库，效果是用打字机的方式显示一段话，可以自定义任何字符串、指定显示速度、指定是否循环等 如下图官方（作者）演示。
只需要引入CDN 在vue中安装依赖 npm install --save vue-typed-js 2. 使用 原生html 最简单使用 var typed = new Typed(".box", { strings: ["欢迎来到我的博客", "你是最棒的"],//输出的文字 typeSpeed: 200,//打字的速度 });效果：
可以通过转义字符^1000在字符串中间暂停一段时间。 var typed = new Typed(".box", { //在了后面停顿三秒 strings: ["让我想一下是谁来看我了^3000", "原来是你呀老铁"], typeSpeed: 200,//打字的速度 }); 智能退格会智能回退到前一句重复的地方 var typed = new Typed(".box", { //会智能回退到前一句重复的地方 strings: ["我明天想吃面条", "我明天想吃烤冷面", "我明天什么都想吃"], typeSpeed: 100,//打字的速度 });效果：
通过cursorChar: '_',属性来改变光标的样式 批量键入通过转义字符``来包括需要批量展示的数据或者文字。 会有一段文字不是通过打印出来的，而是突然完整的出现，会有一种提问打字，机器问答的感觉。 var typed = new Typed(".box", { strings: ["热爱永远热泪盈眶", "只要累不死，就卷死他人", "未来可期"], typeSpeed: 100,//打字的速度 smartBackspace: true, // 开启智能退格 默认false cursorChar: '♡', backSpeed: 50,//后退速度 backDelay: 500,//后退延迟 loop:true,//是否循环 startDelay:1000,//起始时间 fadeOut:true,//淡出效果 });效果：
可以在页面上放置HTML div并从中读取，而不是使用strings数组来插入字符串。这允许机器人、搜索引擎以及禁用JavaScript的用户，在页面上查看您的文本。 你像 天外来物一样 求之不得 你在世俗的名字里, 不重要了。 --薛之谦 var typed = new Typed('#typed', { stringsElement: '#typed-strings', typeSpeed: 200,//打字的速度 });效果：
这里我只列举了我用的多的，还有更多的属性在文章结尾。 var typed = new Typed(".box", { strings: ["欢迎来到我的博客", "送你一句话", "未来可期"], typeSpeed: 100,//打字的速度 smartBackspace: true, // 开启智能退格 默认false backSpeed: 50,//后退速度 backDelay: 500,//后退延迟 loop:false,//是否循环 默认false startDelay:1000,//起始时间 fadeOut:true,//淡出效果 });效果：
更多属性看作者的完整文档 在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 。 最简单的使用 export default {};效果： 直接在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'"最后放一个加了点样式的打字机吧 export default {}; .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; }效果：
如果是在其它项目中使用的话： 在ReactJS使用参考查看此示例在组件中使用Typed.js的React app 在Vue使用参考在vue中使用typed.js 用作WebComponentWebComponent: typed.js作者网站：www.mattboldt.com 点个赞再走吧~~~~ |
【本文地址】
今日新闻 |
推荐新闻 |