Flapper是一款效果非常酷的文字随机翻转变换动画jQuery特效。它的效果类似于机场或车站显示航班或车次的文字变换效果,每个文字都随机变换几次,然后才显示某个设定好的文字。

该文字特效可以显示文字、字母或数字。它有6种尺寸设置,2种预定义主题和2种动画过渡效果。

为了达到最好的效果,该文字插件需要两个外部jQuery插件的支持:numberformattertransform。如果不使用这两个外部依赖也可以,只是效果会稍微差一些。

Flapper提供了6种尺寸设置和2种预定义主题,你可以选择一种来使用。

使用方法

HTML结构

HTML结构使用一个元素即可。

调用插件

每一次文字的变化调用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
}                
              

通常你只需要关心widthchars_preset属性。如果你想要使用自定义的字符,可以在chars_preset中指定不同的chars。Flapper 会使用你的字符集合中的第一个字符来作为默认的图形,所以你最好设置它为 0

预置的字符如下:

  • num 1-90,美元符号,逗号,冒号
  • hexnum 1-9,A-F0
  • alpha A-Z
  • alphanum:所有的alphanum

时间参数timingmin_timingthreshhold用于控制字符的变换速度。如果需要比较明显的字符变换效果,可以设置timing为一个较大的值。min_timing用于控制字符的闪动速度,越大越慢。通常不需要设置threshhold属性。

参数 默认值 描述
width 6 字符的宽度。
format null 传递给numberformatter插件的一个对象。该参数不是必须的。
align right 可选right或left。Flapper的对齐方式。
padding   元素之间的padding值,如果使用numberformatter插件可将它设置为0。
主题设置

Flapper提供了6种尺寸:XSXMLXLXXL,默认的尺寸是M

两种颜色主题分别是lightdark,默认的是dark