文本/链接

文字翻转动画特效jQuery插件

面包多

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

使用方法

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

也想出现在这里?联系我们
创客主机
  1. <script src="jquery.min.js"></script>
  2. <script src="textyleF.min.js"></script>

初始化插件

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

CSS 样式

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

示例 1:

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

示例 2:

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

配置参数

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

示例:

  1. $('target').textyleF({
  2.   duration : 2000,
  3.   delay : 200,
  4.   easing : 'cubic-bezier(0.785, 0.135, 0.15, 0.86)',
  5.   callback : function(){
  6.     $(this).css({
  7.       color : '#fff',
  8.       transition : '1s',
  9.     });
  10.     $('.desc').css('opacity',1);
  11.   }
  12. });

Github 网址:https://github.com/mycreatesite/TextyleFLIP.js

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

Envato Affiliates

本站承接 WordPress / DedeCMS / ThinkPHP 等
系统建站、仿站、开发、定制等业务!

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!