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

带10种动画特效的标题文字动画jQuery插件

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

简介

在页面中引入jquery.animatedheadline.css文件和jquery.animatedheadline.min.js文件。。

```html
<link rel="stylesheet" type="text/css" href="path/to/css/jquery.animatedheadline.css">
<script src="path/to/js/jquery.animatedheadline.min.js"></script>
```
#####  HTML结构
该jquery标题文字动画特效的HTML结构如下：

```html
<div class="selector">
    <h1 class="ah-headline">
        <span>My favorite food is</span>
        <span class="ah-words-wrapper">
            <b class="is-visible">pizza</b>
            <b>sushi</b>
            <b>steak</b>
        </span>
    </h1>
</div>
```
#####  初始化插件
在页面DOM元素加载完毕之后，可以通过下面的方法来初始化该jquery标题文字动画插件。

```html
$(function() {
    $('.selector').animatedHeadline();
})   
```          
#####  配置参数
该jquery标题文字动画插件提供了10种文字动画效果。

```html
$(function() {
    $('.selector').animatedHeadline({
        animationType: 'type'
    });
})  
```        
|  参数 | 类型  | 默认值  |描述|
| ------------ | ------------ | ------------ |
| animation-type| string| 'rotate-1'| 可用的文字动画类型：'rotate-1', 'rotate-2', 'rotate-3', 'type', 'loading-bar', 'slide', 'clip', 'zoom', 'scale', and 'push'|

web299.com

带10种动画特效的标题文字动画jQuery插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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