A JavaScript Library To Animate Text On Scroll – Letterdance.js

Category: Animation , Javascript , Text | March 21, 2016
Author: nate-parrott
Views Total: 846 views
Official Page: Go to website
Last Update: March 21, 2016
License: MIT

Preview:

A JavaScript Library To Animate Text On Scroll – Letterdance.js

Description:

Letterdance.js is a JavaScript library that transition between a set of text by shuffling the letters on page scroll.

How to use it:

Link to the Letterdance.js like this:

<script src="letterdance.js"></script>

Add a group of text into the container with the CSS class letterdance.

<div class="letterdance" style="height: 100%; width: 100%">
  <div><h1>What if Kanye made a song, about Kanye?</h1></div>
  <div><h1>Called "I Miss The Old Kanye," man that would be so Kanye</h1></div>
  <div><h1>That's all it was Kanye, we still love Kanye</h1></div>
  <div><h1>And I love you like Kanye loves Kanye</h1></div>
</div>

That’s it. You can override the defaults like this:

var FRACTION_OF_SCROLL_THAT_IS_PAGE_TRANSITION = 0.2;
var FIXED_TRANSITION_TIME = 0.33;
var ORIGINAL_CONTENT_OPACITY = 0;

var TEXT_NODE = 3;
var ELEMENT_NODE = 1;

 

You Might Be Interested In:


Leave a Reply