当前位置：首页 > 网页特效 > 文字效果

js绘制文字动画特效插件

分类：文字效果日期：2024-05-14 点击(0) 评论(0)

js绘制文字动画特效插件

简介

在页面中引入vara.min.js文件。

```html
<script src="./src/vara.min.js" type="text/javascript"></script>
```
#####  HTML结构
使用一个div元素作为文字绘画的容器。

```html
<div id="container"></div>
```
#####  初始化插件
然后通过下面的方法来初始化插件。

```html
new Vara("#element","font.json",[{
  text:"Handwritten"
}],{
  fontSize:46
});  
```
#####  配置参数
该js绘制文字动画特效插件的可用配置参数有：

```html
new Vara("#container","font.json",[
{
  text:"Hello World", // String, text to be shown
  fontSize:24, // Number, size of the text
  strokeWidth:.5, // Width / Thickness of the stroke
  color:"black", // Color of the text
  id:"", // String or integer, for if animations are called manually or when using the get() method. Default is the index of the object.
  duration:2000, // Number, Duration of the animation in milliseconds
  textAlign:"left", // String, text align, accepted values are left,center,right
  x:0, // Number, x coordinate of the text
  y:0, // Number, y coordinate of the text
  fromCurrentPosition:{ // Whether the x or y coordinate should be from its calculated position, ie the position if x or y coordinates were not applied
    x:true, // Boolean
    y:true, // Boolean
  },
  autoAnimation:true, // Boolean, Whether to animate the text automatically
  queued:true, // Boolean, Whether the animation should be in a queue
  delay:0,     // Delay before the animation starts in milliseconds
  letterSpacing:0 // Number, space between each character
}],{
  // The options given below will be applicable to every text created,
  // however they will not override the options set above.
  // They will work as secondary options.
  fontSize:24, // Number, size of the text
  strokeWidth:.5, // Width / Thickness of the stroke
  color:"black", // Color of the text
  duration:2000, // Number, Duration of the animation in milliseconds
  textAlign:"left", // String, text align, accepted values are left,center,right
  autoAnimation:true, // Boolean, Whether to animate the text automatically
  queued:true, // Boolean, Whether the animation should be in a queue
  letterSpacing:0
})              
```    
#####  方法
该js绘制文字动画特效插件的可用方法有：

- .ready(function)：当字体被加载完成，元素准备就绪时执行该方法。其它方法在该方法内执行。
- .get(id)：返回字符和容器对象。字符是一个svg g元素的数组。
- .draw(id)：用于当 autoAnimation:false 时手动绘制文字动画。
- .animationEnd(function(i,o){})：用于在动画结束时触发一个函数。
- .playAll()：开始所有的文字动画。

web299.com

js绘制文字动画特效插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果