[ *** 插件]酷炫的打字机效果: Typed.js
文章转载与简书https://www.jianshu.com/p/37ff22decc62
typed.js效果
预览地址
Type.js是一个轻量级的插件, 用于实现页面文字的打字机效果. 它使用起来非常简单, 只需要几行代码就能实现高大上的打字机效果.
1.简单介绍饮用 ***
//script标签导入<script src="./typed.js"></script>
//cdn导入 <script src="https://cdn.bootcss.com/typed.js/2.0.5/typed.js"></script>
2. 实例化对象
<span class="e01f-2bb2-c22e-91bd element"></span> //目标容器
<script> var typed = new Typed('.element', { strings: ["纠正一个错误的 *** 有很多", "而解决一个错误的终极 *** ，就是不给它发生的机会。"], //输入内容, 支持html标签
typeSpeed: 100, //打字速度
backSpeed: 50 //回退速度
});</script>
如果想加入鼠标闪烁效果, 引入一下样式
.typed-cursor{ opacity: 1; -webkit-animation: blink 0.7s infinite; -moz-animation: blink 0.7s infinite; animation: blink 0.7s infinite;
}
@keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-webkit-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
@-moz-keyframes blink{
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
其他配置参数
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} *** artBackspace only backspace what doesn't match the previous string
*/
*** artBackspace: 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', /**
* 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) => {}
});
Type.js官网: http://www.mattboldt.com/demos/typed-js/
Github文档地址:https://github.com/mattboldt/typed.js/
CDN地址:http://www.bootcdn.cn/typed.js/
相关文章
js分享站外输出网站时加上特殊标识符
/*站外输出网站时加上特殊标识符*/ $("a").each(function(index, item) { var url = $(item).attr("href"); if (u...
JS打印机效果代码整理
纯js性 简单快速 功能少 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl...
js屏蔽F12和右键代码
//屏蔽F12和右键 function click(e) { if (document.all) { if (event.button==2||event.button==3) { alert("你...
电脑端利用JS简单快速批量取消微博的关注
利用JS简单快速批量取消微博的关注 微博关注的人太多了，一个一个取消很麻烦？那么这个方法很适合你，和全自动取关都差不多了，只适用于电脑用户！ 步骤如下 1.电...
fancybox3图片浮窗增强jQuery插件
介绍：用于呈现各种类型媒体的javascript lightbox库。响应灵敏，触控灵活，可定制。 3.0主要就是功能多且美观 官方给出的最快使用方法 <!-- 1. Add latest...
js获取当前位置
手机端获取城市名称 百度地图接口 引入百度api<script src="http://api.map.baidu.com/api?v=1.4" type="text/javascript"...
Copyright Your WebSite.Some Rights Reserved.
免责声明:本站所发布的任何网站，全部来源于互联网，版权争议与本站无关。仅供技术交流，如有侵权或不合适，请联系本人进行删除。不允许做任何非法用途！