用于拆分翻板文本动画的 jQuery 插件 - Flapper

版本:

浏览量:1185

最后更新：2021-09-07

应用标签：git MAC 软件 Jquery插件

推荐指数:

查看演示点击下载

详细信息

Flapper 是一个 jQuery 文本显示插件，用于创建可在火车站和机场中找到的动画拆分襟翼文本动画，它们通常显示出发和/或到达信息，并通过酷炫的字母翻转来显示新信息。

动画使用打印在铰链面板上的旋转堆叠的字母和数字。随着堆栈的旋转，一个新的符号会落到位。Flapper 使用 CSS3 转换重新创建了这种效果。

特征：

便于使用
黑暗和光明主题
带有六种尺寸预设和两种配色方案
支持数字、字母和字母数字显示
两种动画效果，带或不带变换

你可能还喜欢：

机场信息板文字效果
使用 jQuery 实现机场飞行板文本效果 - 飞行板

基本用法：

1. Include the latest jQuery library and jQuery Flapper Plugin on the web page

<link href="css/flapper.css" rel="stylesheet" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="src/jquery.flapper.js"></script>

2. Include numberformatter and transform jQuery plugins for best result. But the plugin can also be used on its own with fewer special effects.

<script src="jquery.transform.min.js"></script>
<script src="jquery.numberformatter.min.js"></script>

3. Create a container where you'd like display the animation.

<div class="display">
  <input class="XXL" id="header_display" />
</div>

4. Attach the plugin to the input field and and update the display as follows:

// initialize the plugin
var $header_display = $('#header_display');
$header_display.flapper({
  width: 7,
  chars_preset: 'alpha'
});
 
// update the display
$('#display').flapper().val('jqueryscript').change();

5. Available CSS classes to customize the appearance of the display.

XS: Extra Small
S: Small
M: Medium (Default)
L: Large
XL: Extra Large
XXL: Largest
light: Light Theme
dark: Dark Theme

<input class="XXL dark" id="header_display" />

6. All default settings to config the plugin.

$('#anyElement').flapper({
 
  // The width of the display in digits
  width: 6,
 
  // A object with options to send to the numberformatter plugin.
  // This plugin isn't required unless this is set.
  format: null,
 
  // or 'left'
  align: 'right',
 
  // Set this to 0 if you're not using the numberformatter plugin and you want to pad your numbers with zeros.
  padding: ' ',
 
  // If you'd like your own custom stack of letters and numbers, pass an array of characters here.
  // This value will override the chars_preset value.
  // You can also pass an array of strings, in which case Flapper will display entire words as a single digit.
  chars: null,
 
  // or 'alpha', 'alphanum', 'hexnum'
  chars_preset: 'num',
 
  // Animation duration in milliseconds.
  timing: 250,
 
  // Min animation duration.
  min_timing: 10,
 
  // Threshhold in milliseconds.
  threshhold: 100,
 
  // determine whether to use jQuery transform plugin
  transform: true,
 
  // Cycle interval
  cycleInterval: null,
 
  // Callback functions
  on_anim_start: null,
  on_anim_end: null,
   
});