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

jQuery炫酷文字翻转打字机特效

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

jQuery炫酷文字翻转打字机特效

简介

在引入以上文件后，在body标签中放置下面的html代码：

```html
<body>
  ..
  <h1 class="intro">...</h1>
  ..
</body>
```
##### JAVASCRIPT
```html
$(".intro").flipping_text({
    tickerTime: 10,
    customRandomChar: false,
    tickerCount: 10,
    opacityEffect: true,
    resetOnChange: false
});
```
打字机特效插件将自动计算容器中的文字个数，并执行打字机效果。下面来看看一些可用的参数：

- tickerTime：该参数用于设置打字机的打字速度，单位毫秒。默认值为10ms。
- customRandomChar：该参数用于设置随机字符。默认的字符为“ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789”，你可以设置自己的用于打印的字符。
- tickerCount：该参数用于设置打字机在字符变化时变化多少次才显示真正的字符。默认值是10次。
- opacityEffect：该参数用于设置打字机字符变化效果，默认为“fade-in ”效果。要关闭该效果，设置它为false。
- resetOnChange：该参数是文字停止动画和显示下一个文字时的回调函数。当用户按了“tabs”键时，动画被重置，默认值为false。

##### 按顺序播放文字序列
这个打字机特效插件允许你通过设置data-delay属性来定义每个文字的动画时间，并使文字按一定的序列一一打印。

data-delay

为了让开发者使用方便，这个打字机特效插件将自动计算每个文字的打印时间，不需要你去计算它们的时间总和，下面是一个例子：

```html
<body>
    ..
    <h1 class="intro">...</h1>
    <h1 class="intro" data-delay="1000">...</h1>
    <h1 class="intro" data-delay="1000">...</h1>
    ..
</body>
```
想象一下你要每一秒打印一个文字，在上面的代码中，第一个intro会立刻被显示，第二个会延时1秒，第三个会延时2秒。所以，你只需要 定义1000ms的data-delay就可以完成这个效果。

web299.com

jQuery炫酷文字翻转打字机特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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