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

当前位置:主页 > jQuery库 > 文本和超链接 > 带10种动画特效的标题文字动画jQuery插件
带10种动画特效的标题文字动画jQuery插件
分享:

    插件介绍

    这是一款简单的标题文字动画jQuery插件。该jquery文字动画插件自带有10种动画效果,可以实现标题文字的各种切换动画效果。

    浏览器兼容性

    浏览器兼容性
    时间:03-04
    阅读:
简要教程

这是一款简单的标题文字动画jQuery插件。该jquery文字动画插件自带有10种动画效果,可以实现标题文字的各种切换动画效果。

安装

可以通过npm来安装该插件。

npm install jquery-animated-headlines                  
                

使用方法

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

<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结构如下:

<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标题文字动画插件。

$(function() {
    $('.selector').animatedHeadline();
})             
                

配置参数

该jquery标题文字动画插件提供了10种文字动画效果。

$(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'

该jquery标题文字动画插件的github地址为:https://github.com/GeoffSelby/jquery-animated-headlines