插件描述：该文字动画特效使用anime.js来制作动画特效，字母的处理使用ming插件，共有10种非常炫酷的文字动画效果。不支持IE
实现的主要思想如下：我们为每个字母创建一个SVG，然后将图形点缀到每个字母的附近。
初始化：
1 2 3 4 5 6 7 8 9 10 | const word = new Word(element, options);options: { shapesOnTop: false, // 图形分布在字母的上方，否则在下方 totalShapes: 10, // 字母附近图形的数量 shapeTypes: ['circle', 'rect', 'polygon'], // 图形的类型 shapeColors: ['#e07272', '#0805b5', '#49c6ff', '#8bc34a', '#1e1e21'], // 随机选取颜色的种类 shapeFill: true, // 图形填充颜色，否则仅描边 shapeStrokeWidth: 1 // 描边宽度} |
显示和隐藏字母：
1 2 | word.show(options)word.hide(options) |
定义字母和图形展显的效果：
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | word.show({ lettersAnimationOpts: { duration: 400, delay: (t,i) => i*60, easing: 'easeInExpo', opacity: [0,1], scale: [0,1] }, shapesAnimationOpts: { duration: 700, delay: (t,i) => i*40, easing: 'easeOutExpo', translateX: () => [0,anime.random(-20,20)], translateY: () => [0,anime.random(-400,400)], scale: () => [randomBetween(0.2,0.6),randomBetween(0.2,0.6)], rotate: () => [0,anime.random(-16,16)], opacity: [ {value: 1, duration: 1, easing: 'linear'}, {value: 0, duration: 700, easing: 'easeOutQuad'} ] }}) |
特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com
- 上一个特效： jQuery轮播图加时间轴插件
- 下一个特效： 基于jqueryrotate.js开发的大转盘抽奖