这是一款简单的标题文字动画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