Below are some of the most common ways to include writing.js.
<script src="https://unpkg.com/writing.js"></script>To include writing.js in Node, first install with npm.
$ npm i writing.js
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.
import {animationWriting} from 'writing.js';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 = require('writing.js');To use writing.js in your website.
- Create an HTML element to which the animation will be executed and add the attribute
wj-wordswith the words separated with the comma character,which will be animated. - Now simply add the
javascriptin the<body>element of your document. - Finally run the
animationWriting(selector)function, sending astringwith theselectorof the element to which you want to run the animation.
- Create an HTML element to which the animation will be executed.
- Now simply add the
javascriptin the<body>element of your document. - finally call the function
animationWriting(selector, words[]), sending astringwith theselectorof the element to which you want to run the animation and as asecond parametersend anarraywith the content to animate. - It is possible to send a
third parameterwith an object to modify the animation times or styles of element.
<script>
animationWriting('#example', [
'mundo',
'wêreld',
...
], {
times: {
writer: 150, // (ms)
eraser: 150, // (ms)
read: 1000 // (ms)
},
styles : ['color: #fff', 'background: black'] // (Array of strings with declarations of the properties and value.)
});
</script>That is all!
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.
<html>
<head> ... </head>
<body>
...
<!--
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`.
-->
<h2>Hello <span id="example" wj-words="mundo, wêreld, свят, svět, 世界, עולם, विश्व, جهان, Мир">world</span>!</h2>
...
</body>
</html>- Add the javascript in the body.
<html>
<head> ... </head>
<body>
...
<h2>Hello <span id="example" wj-words="mundo, wêreld, свят, svět, 世界, עולם, विश्व, جهان, Мир">world</span>!</h2>
<!--
EN: Add library in the `body` of the document.
ES: Agregar librería en el `body` del documento.
-->
<script src="https://unpkg.com/writing.js"></script>
...
</body>
</html>- Run the
animationWriting(selector)function.
<html>
<head> ... </head>
<body>
...
<h2>Hello <span id="example" wj-words="mundo, wêreld, свят, svět, 世界, עולם, विश्व, جهان, Мир">world</span>!</h2>
<script src="https://unpkg.com/writing.js"></script>
<script>
/**
* @description
* EN: This is the only line that we need to make it work it would release it,
* we call the function and send as parameter a string with the selector of
* the element to which the animation will be executed.
* ES: Esta es la única línea que necesitamos para hacer funcionar la liberaría,
* llamamos la función y enviamos como parámetro un string con el selector
* del elemento al cual se le va a ejecutar la animación.
*/
animationWriting('#example');
</script>
</body>
</html>Now just enjoy the magic. 🤓
Copyright © 2020-present Oscar Amado 🧔