当前位置：首页 > 网页特效 > 其他

超逼真的控制台打字jQuery特效

分类：其他日期：2024-05-14 点击(1) 评论(0)

超逼真的控制台打字jQuery特效

简介

##### HTML结构
该打字特效的HTML结构使用一个空的div来制作即可。

```html
<div class="terminal"></div> 
```
#####  CSS样式
为了效果更加逼真，你可以为这个打字效果添加一些CSS样式。

```html
body {
  width: 100%;
  margin: 0px;
  font-family: 'Helvetica Neue';
  background-color: #020202;
}
 
.terminal {
  width: 60%;
  font-size: 26px;
  color: #00fd55;
  letter-spacing: 2px;
  position: absolute;
  top: 50%;
  left: 20%;
}
 
.terminal::before {
  content: ">";
  margin-right: 10px;
}       
```         
#####  JAVASCRIPT
在页面DOM元素加载完毕之后可以通过下面的方法来初始化该控制台打字特效插件。

```html
$('.terminal').typewriting( "Hello World!", {
 
  // default: 150
  "typing_interval": 200,
 
  // default: 0.7s
  "blink_interval": "1s",
 
  // default: black
  "cursor_color": "#00fd55"
   
}
```
####  配置参数

------------

#####  typewriting()
该打字特效的第一个参数是你想要输出的文字。

第二个参数有下面的一些选项：

- typing_interval：打字的速度。
- blink_interval：光标闪烁的速度。
- cursor_color：光标的颜色。
第三个参数是打字效果完成之后的回调函数：

```html
$('.string').typewriting( "Text here", {
    "typing_interval": 300,
    "blink_interval": "1.5s"
    "cursor_color": "white"
}, function() {
    console.log( "End." );
});   
```             
#####  rewrite()
这个方法可以在同一个元素重写不同的文字。
```html

$('.string').rewrite( "Another text here", function() {
    console.log( "End, 2." );
});   
```

web299.com

超逼真的控制台打字jQuery特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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