欢迎投稿

菜鸟之家

当前位置:菜鸟之家 > html5库 > HTML5动画 > 18种基于anime.js的文字动画特效

18种基于anime.js的文字动画特效

18种基于anime.js的文字动画特效

关键词:动画,文字,css3文字动画,html5文字动画效果,css3文字动画效果,html文字动画,js文字动画,javascript,anime.js

描述:这是一款基于anime.js的文字动画特效。这些文字效果是通过前后导航按钮切换文字时,制作不同的文字动画特效。

简要教程

这是一款基于anime.js文字动画特效。这些文字效果是通过前后导航按钮切换文字时,制作不同的文字动画特效。

使用方法

下面是其中一种文字动画特效的GIF动态图片演示效果:

文字动画特效

制作这组文字动画特效的js代码类似下面的样子:

// Initialize
var txt = new TextFx(this.el.querySelector(".title"));

// Show letters: 
// txt.show([effect] [,callback]);
// If nothing is passed, then there"s no animation.
// ´effect´ can either be one of the predefined effects: ["fx1",...,"fx17"] or 
// an object literal representing both, in and out animations (anime.js based).

// Example:
effect = {
  in: {
    duration: 500,
    delay: function(el, index) { 
      return 250+index*40; 
    },
    easing: "easeOutExpo",
    opacity: 1,
    translateY: ["50%","0%"]
  },
  out: {
    duration: 500,
    delay: function(el, index) { 
      return index*40; 
    },
    easing: "easeOutExpo",
    opacity: 0,
    translateY: "-50%"
  }
}
// ´callback´ is the callback function, after all the letters finished the animation.

// Hide letters: 
// txt.hide([effect] [,callback]); (same logic of show)                  
                

关于anime.js更详细的用法,可以参考它的说明文档

该文字动画特效的原文地址为:http://tympanus.net/codrops/2016/10/18/inspiration-for-letter-effects/

说明:菜鸟之家所有素材均是用户自行上传分享并拥有版权或使用权,仅供网友学习交流,未经上传用户书面授权,请勿作他用。若您的权利被侵害,请联系QQ:11809283或发送邮件至11809283@qq.com。

菜鸟之家承诺:本站所有资源,无需注册,免费下载,无病毒,无弹窗,无干扰链接!

转载请注明出处!本文地址:http://www.jeeok.com/h5_h5donghua/17.html

 在线演示  免费下载
编号:201611200000000017
大小:0.99MB
上传时间:2016-11-24 16:32
素材由用户"alfdpipgfj"上传分享。

标签

最新推荐素材

与18种基于anime.js的文字动画特效相关的素材

.