https://github.com/dulacp/revealing.js

Reveal your text with a delightful letter by letter animation. Inspired by the Secret app.
https://github.com/dulacp/revealing.js

animation javascript letter-animation letters

Last synced: 5 days ago
JSON representation

Reveal your text with a delightful letter by letter animation. Inspired by the Secret app.

• Host: GitHub
• URL: https://github.com/dulacp/revealing.js
• Owner: dulacp
• License: mit
• Created: 2014-06-24T10:43:21.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2015-06-21T00:37:35.000Z (over 9 years ago)
• Last Synced: 2024-11-11T13:54:52.859Z (6 days ago)
• Topics: animation, javascript, letter-animation, letters
• Language: JavaScript
• Size: 464 KB
• Stars: 7
• Watchers: 2
• Forks: 4
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Revealing.js

**Reveal your text with a delightful letter by letter animation.**

> Inspired by the Secret app.

![Text animation example](examples/quote.gif)

## Examples

[**Check out some basic examples**](http://dulaccc.github.com/Revealing.js/examples/)

## Getting Started

### Install from Bower (recommended)

```sh

bower install Revealing.js

```

### Development version

- [revealing.js](https://raw.githubusercontent.com/dulaccc/Revealing.js/master/src/revealing.js)

- [revealing.scss](https://raw.githubusercontent.com/dulaccc/Revealing.js/master/src/revealing.scss)

### Build compiled version from sources

3 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/`.

## Integration

In your web page:

```html

    "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

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);

});

```

## Documentation

**show**  

Reveal the text

**reset**  

Reset the text to play the animation again

## Contact

[Pierre Dulac](http://github.com/dulaccc)  

[@dulaccc](https://twitter.com/dulaccc)

## License

Revealing.js is available under the MIT license. See the LICENSE file for more info.