当前位置：首页 > 网页特效 > 文字效果

控制台打印文字效果js插件-typed.js

分类：文字效果日期：2024-05-14 点击(7) 评论(0)

简介

在页面中引入jquery和typed.js文件。

```html
<script src='path/to/jquery.min.js'></script>
<script src='path/to/typed.js'></script>     
```             
#####  HTML结构
使用一个span元素来作为打印控制台容器。

```html
<span class="element"></span>  
```            
#####  初始化插件
可以通过纯js的方法来初始化type.js插件。

```html
document.addEventListener("DOMContentLoaded", function(){
  Typed.new(".element", {
    strings: ["First sentence.", "Second sentence."],
    typeSpeed: 0
  });
});   
```               
也可以将typed.js作为jquery插件来使用。

```html
$(function(){
  $(".element").typed({
    strings: ["First sentence.", "Second sentence."],
    typeSpeed: 0
  });
});     
```             
#####  CSS样式
你需要使用下面的css样式来添加光标的闪烁效果。

```html
.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; }
}
.typed-fade-out{
    opacity: 0;
    animation: 0;
    transition: opacity .25s;
}         
```         
#####  配置参数
typed.js插件的所有可用配置参数如下：

```html
Typed.new(".element", {
  strings: ["First sentence.", "Second sentence."],
  // Optionally use an HTML element to grab strings from (must wrap each string in a <p>)
  stringsElement: null,
  // typing speed
  typeSpeed: 0,
  // time before typing starts
  startDelay: 0,
  // backspacing speed
  backSpeed: 0,
  // shuffle the strings
  shuffle: false,
  // time before backspacing
  backDelay: 500,
  // Fade out instead of backspace (must use CSS class)
  fadeOut: false,
  fadeOutClass: 'typed-fade-out',
  fadeOutSpeed: 500, // milliseconds
  // loop
  loop: false,
  // null = infinite
  loopCount: null,
  // show cursor
  showCursor: true,
  // character for cursor
  cursorChar: "|",
  // attribute to type (null == text)
  attr: null,
  // either html or text
  contentType: 'html',
  // call when done callback function
  callback: function() {},
  // starting callback function before each string
  preStringTyped: function() {},
  //callback for every typed string
  onStringTyped: function() {},
  // callback for reset
  resetCallback: function() {}
});                  
                </p>
```

web299.com

控制台打印文字效果js插件-typed.js

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果