Flapper是一款效果非常酷的文字随机翻转变换动画jQuery特效。它的效果类似于机场或车站显示航班或车次的文字变换效果,每个文字都随机变换几次,然后才显示某个设定好的文字。
该文字特效可以显示文字、字母或数字。它有6种尺寸设置,2种预定义主题和2种动画过渡效果。
为了达到最好的效果,该文字插件需要两个外部jQuery插件的支持:numberformatter和transform。如果不使用这两个外部依赖也可以,只是效果会稍微差一些。
Flapper提供了6种尺寸设置和2种预定义主题,你可以选择一种来使用。
使用方法
HTML结构
HTML结构使用一个元素即可。
调用插件
$('#display').flapper(options).val(12345).change();
每一次文字的变化调用change()方法来更新文字。
配置参数
var options = {
width: 6, // number of digits
format: null, // options for jquery.numberformatter, if loaded
align: 'right', // aligns values to the left or right of display
padding: '', // value to use for padding
chars: null, // array of characters that Flapper can display
chars_preset: 'num', // 'num', 'hexnum', 'alpha' or 'alphanum'
timing: 250, // the maximum timing for digit animation
min_timing: 10, // the minimum timing for digit animation
threshhold: 100, // the point at which Flapper will switch from
// simple to detailed animations
transform: true // Flapper automatically detects the jquery.transform
// plugin. Set this to false if you want to force
// transform to off
on_anim_start: null // Callback for start of animation
on_anim_end: null // Callback for end of animation
}
通常你只需要关心width和chars_preset属性。如果你想要使用自定义的字符,可以在chars_preset中指定不同的chars。Flapper 会使用你的字符集合中的第一个字符来作为默认的图形,所以你最好设置它为或0。
预置的字符如下:
num:,1-9,0,美元符号,逗号,冒号
hexnum:,1-9,A-F,0
alpha:,A-Z
alphanum:所有的alpha和num
时间参数timing,min_timing和threshhold用于控制字符的变换速度。如果需要比较明显的字符变换效果,可以设置timing为一个较大的值。min_timing用于控制字符的闪动速度,越大越慢。通常不需要设置threshhold属性。
参数
默认值
描述
width
6
字符的宽度。
format
null
传递给numberformatter插件的一个对象。该参数不是必须的。
align
right
可选right或left。Flapper的对齐方式。
padding
元素之间的padding值,如果使用numberformatter插件可将它设置为0。
主题设置
Flapper提供了6种尺寸:XS、X、M、L、XL和XXL,默认的尺寸是M。
两种颜色主题分别是light和dark,默认的是dark。
如果觉得《html文字自动上翻 jQuery超酷文字随机翻转变换动画特效》对你有帮助,请点赞、收藏,并留下你的观点哦!