0.3.4 • Published 7 years ago
twreplace v0.3.4
TWReplace.js
Continually replace text using a typing animation.
follow @samjdavis for updates on TWRelpace.
LIVE DEMO
Live examples
Documentation
It takes just second to install and use TWReplace.js
Installation
Bower
bower install twreplace
HTML
<script src="src/twreplace.js"></script>
Basic Usage
HTML
Usage is incredibly simple requiring only a single dataset attribute added to any text based html element. It is important to pass a valid JSON array, including double quotes, of values.
<p>This text has an <span twreplace='["fantastic", "easy", "simple"]'>editable</span> element</p>
Customisability
Several options are available to TWReplace.js at this stage:
- twreplace-charspeed (Speed that characters are removed/added. Measured in ms. Defaults to 25)
<p twreplace='["Word 1", "Word 2"]' twreplace-charspeed="50">Change</p>
- twreplace-wordspeed (Speed that words are changed. Measured in ms. Defaults to 2000)
<p twreplace='["Word 1", "Word 2"]' twreplace-wordspeed="1000">Change</p>
Contribute
The library is written in vanilla javascript, please update src/twreplace.js
We use grunt to compile the scss into css.
Install the libraries
npm install
Get the compilation running in the background
grunt watch
Bug Tracker
If you find a bug, please report it here on Github!
Developer
Developed by Samuel Davis, sjd.co
Thanks!