jQuery文字翻转动画特效插件

当前位置:主页 > jQuery库 > 文本和超链接 > jQuery文字翻转动画特效插件
jQuery文字翻转动画特效插件
分享:

    插件介绍

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

    浏览器兼容性

    浏览器兼容性
    时间:2019-06-03
    阅读:
简要教程

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

使用方法

在页面中引入html2canvas.js文件。

<script src="jquery.min.js"></script>
<script src="textyleF.min.js"></script>
                
初始化插件
$('target').textyleF();
                
CSS样式
/* 目标元素 */
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:

target {
  opacity: 0;
  perspective : 200px;
}
target span {
  /* flip effect */
  transform : rotateY(-90deg);
  /* fade effect */
  opacity: 0;
}
                

示例2:

target {
  opacity: 0;
    perspective : 200px;
}
target span {
  /* flip effect */
  transform : rotateY(-90deg) rotateX(45deg);
  transform-origin : -50% 75%;
  /* fade effect */
  opacity: 0;
}
                

配置参数

$('target').textyleF({
  duration : 1000,
  delay : 150,
  easing : 'ease',
  callback : null
});
                

示例:

$('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);
  }
});
                

该jQuery文字翻转动画特效插件的github网址为:https://github.com/mycreatesite/TextyleFLIP.js

下一篇:没有了
贵州快3

免责声明: 本站资料及图片来源互联网文章,本网不承担任何由内容信息所引起的争议和法律责任。所有作品版权归原创作者所有,与本站立场无关,如用户分享不慎侵犯了您的权益,请联系我们告知,我们将做删除处理!