⌨ Writing Animation JS
🛠 Instalation
Below are some of the most common ways to include writing.js
.
Browser
Script tag
Node
To include writing.js in Node, first install with npm.
$ npm i writing.js
Babel / ES6
Babel
is a next generation JavaScript compiler.
One of the features is the ability to use ES6/ES2015 modules now, even though browsers do not yet support this feature natively.
;
Browserify / Webpack / ES5
There are several ways to use Browserify and Webpack. For more information on using these tools, please refer to the corresponding project's documention. In the script, including writing.js will usually look like this...
const animationWriting = ;
🤔 How to usage?
To use writing.js
in your website.
Option 1
- Create an HTML element to which the animation will be executed and add the attribute
wj-words
with the words separated with the comma character,
which will be animated. - Now simply add the
javascript
in the<body>
element of your document. - Finally run the
animationWriting(selector)
function, sending astring
with theselector
of the element to which you want to run the animation.
Option 2
- Create an HTML element to which the animation will be executed.
- Now simply add the
javascript
in the<body>
element of your document. - finally call the function
animationWriting(selector, words[])
, sending astring
with theselector
of the element to which you want to run the animation and as asecond parameter
send anarray
with the content to animate. - It is possible to send a
third parameter
with an object to modify the animation times or styles of element.
That is all!
😋 Example
Now some examples, you can see some examples of the implementation and use of the library in the /examples
.
- Create an HTML element to which the animation will be executed and add the attribute
wj-words
.
... ... <!-- EN: Element to which the animation with the attribute `wj-words` will be executed. ES: Elemento al cual se le va a ejecutar la animación con el atributo `wj-words`. --> Hello world! ...
- Add the javascript in the body.
... ... Hello world! <!-- EN: Add library in the `body` of the document. ES: Agregar librería en el `body` del documento. --> ...
- Run the
animationWriting(selector)
function.
... ... Hello world!
Now just enjoy the magic. 🤓
License 🔥
Copyright © 2020-present Oscar Amado 🧔