Digitalwrite是一个奇特的jQuery文本动画插件,通过在5x5矩阵中逐步显示字符来创建动画数字效果。
1.将缩小版的Digitalwrite插件添加到页面中。
- <script src="/path/to/cdn/jquery.min.js"></script>
- <script src="/path/to/jquery.digitalwrite.min.js"></script>
2.调用函数并指定要设置动画的角色。
- <span id="example"></span>
- $("#example").digitalwrite({
- char: 'J',
- });
3.设置字符的高度/宽度。
- $("#example").digitalwrite({
- char: 'J',
- height: 20,
- width: 20,
- });
4.设置角色的背景。
- $("#example").digitalwrite({
- char: 'J',
- background: 'rgba(0, 0, 0, .1)',
- });
5.自定义角色的边框。
- $("#example").digitalwrite({
- char: 'J',
- border: '1px solid red',
- });
6.更改动画类型:无、运动或收缩。
- $("#example").digitalwrite({
- char: 'J',
- animation: 'spiral',
- });
7.更改动画类型:无、运动或收缩。
- $("#example").digitalwrite({
- char: 'J',
- animation: 'spiral',
- });
8.覆盖默认动画速度。默认值:500。
- $("#example").digitalwrite({
- char: 'J',
- timeout: 1000,
- });
9.动画完成后执行一个功能。
- $("#example").digitalwrite({
- success: function() {
- // do something
- }
- });
10.将角色转换为另一个角色。
- $("#example").transformTo('K', function() {
- console.info('successfully transformed to K');
- });