Simular animación de firma con la biblioteca vara. js

Vista prévia

Descripción

La biblioteca de JavaScript de vara te permite crear animaciones de dibujo de texto para simular que alguien inicia sesión en tu página web.

Funcionamiento

Enlace a la biblioteca vara. js.

<script src="src/vara.min.js"></script>

Cree un contenedor en el que desee mostrar la animación de dibujo de texto.

<div id="vara-container"></div>

Inicializar la biblioteca vara. js y definir el texto para escribir en el contenedor.

var vara = new Vara("#vara-container","font.json",[{


text:"WIKICSS.COM!"
}]);

Opciones posibles para personalizar la animación de dibujo de texto.

var vara = new Vara("#vara-container","font.json",[{



// text to type


text:"WIKICSS.COM!",



// font size


fontSize:24,



 // strok width


strokeWidth:.5,



// font color


color:"black",



// unique ID


id:"",



// duration in ms


duration:2000,



// text alignment


textAlign:"left",



// offsets


x:0,


y:0,



 // Whether the x or y coordinate should be from its calculated position, ie the position if x or y coordinates were not applied


fromCurrentPosition:{



 x:true, // Boolean



y:true, // Boolean


},



// auto play


autoAnimation:true,



// animate the text in a queue


queued:true,



// delay in ms


delay:0,



// space between characters


letterSpacing:0



}]);

Registro de cambios

02/12/2019

• Se corrigen los problemas con el método draw ()