Reveal your text with a delightful letter by letter animation.
Inspired by the Secret app.
bower install Revealing.js3 simple steps:
- clone
git clone https://github.com/dulaccc/Revealing.js.git && cd Revealing.js - install dependencies
npm install - build
gulp build
Then you'll find the compiled code in dist/.
In your web page:
<script src="dist/revealing.js"></script>
<link rel="stylesheet" href="dist/revealing.css"></script>
<body>
<span class="fancy-text">"Je suis jeune il est vrai mais aux âmes bien nées la valeur n'attend point le nombre des années" Le Cid - Corneille</span>
</body>
<script>
document.addEventListener('DOMContentLoaded', function() {
// initialize the plugin
var el = document.querySelector('.fancy-text');
var reveal = new Revealing(el);
// delay the animation just a little bit
setTimeout(function() {
reveal.show();
}, 150);
});
</script>show
Reveal the text
reset
Reset the text to play the animation again
Revealing.js is available under the MIT license. See the LICENSE file for more info.