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

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

版本:

浏览量:175

最后更新:2021-09-07

应用标签:Jquery插件MAC 软件

推荐指数:

详细信息

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,
   
});

Changelog:

v1.1.4 (2021-03-17)

  • Update bower package name

  • Remove Trailing Commas in object literals to fix parse error.

  • Add in methods for adding and removing flapper digits on the fly

  • Changed font url protocol to use https

2015-08-18

  • Add in methods for adding and removing flapper digits on the fly

v1.1.3 (2014-02-14)

  • Set explicit content-sizing on Flapper elements

  • Use jQuery.inArray() to avoid problems with lastIndexOf() and IE8

v1.1.2 (2013-08-11)

  • Switch animation mode from fast to slow automatically.

发表评论

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。