jQuery文字翻转动画特效插件

jQuery文字翻转动画特效插件

这是一款jQuery文字翻转动画特效插件。该插件通过jquery动态为文字添加CSS3属性来实现文字的翻转动画效果,并提供一些配置参数和回调函数来控制文字动画的效果。

使用方法
在页面中引入html2canvas.js文件。

1
2
<script src="jquery.min.js"></script>
<script src="textyleF.min.js"></script>

初始化插件

1
$('target').textyleF();

CSS样式

1
2
3
4
5
6
7
8
/* 目标元素 */
opacity: 0;  
perspective: xxx; //3d effective dose
/* 翻转动画*/
transform : rotateY(xxxdeg);  //you can also use 'rotateX' together.  
(transform-origin : xxx;) //If you want.  
/* 淡入淡出动画 */
opacity: 0;

示例1:

1
2
3
4
5
6
7
8
9
10
target {
  opacity: 0;
  perspective : 200px;
}
target span {
  /* flip effect */
  transform : rotateY(-90deg);
  /* fade effect */
  opacity: 0;
}

示例2:

1
2
3
4
5
6
7
8
9
10
11
target {
  opacity: 0;
    perspective : 200px;
}
target span {
  /* flip effect */
  transform : rotateY(-90deg) rotateX(45deg);
  transform-origin : -50% 75%;
  /* fade effect */
  opacity: 0;
}

配置参数

1
2
3
4
5
6
$('target').textyleF({
  duration : 1000,
  delay : 150,
  easing : 'ease',
  callback : null
});

示例:

1
2
3
4
5
6
7
8
9
10
11
12
$('target').textyleF({
  duration : 2000,
  delay : 200,
  easing : 'cubic-bezier(0.785, 0.135, 0.15, 0.86)',
  callback : function(){
    $(this).css({
      color : '#fff',
      transition : '1s',
    });
    $('.desc').css('opacity',1);
  }
});
当前内容只有登录了才能查看,如果您已经注册,请登录
3

发表评论