About This Demo
Scroll down past the large headline below. Each letter will detach and fall like rain into the target container further down the page, where they rearrange to spell a new phrase.
The script tag used in this demo:
<script src="../letter-rain-transform.js
?source=%23letter-rain-source
&target=%23letter-rain-target
&phrase=Every+word+has+a+destination
&duration=1200
&stagger=20
&fallDistance=70
&debug=true"></script>
↓ Scroll down to find the source text ↓
Words become rain
↓ Keep scrolling past the headline ↓
Letters land here ↓
Try Different Phrases
Change the phrase parameter in the script URL to any URL-encoded string:
phrase=Every+word+has+a+destination ← spaces as +
phrase=A+new+beginning ← shorter than source
phrase=The+letters+dance+into+place ← longer than source
Repeat Mode
Add &repeat=true to re-trigger the animation every time you scroll past the source element.
<script src="../letter-rain-transform.js
?source=%23letter-rain-source
&target=%23letter-rain-target
&phrase=Keep+scrolling
&repeat=true"></script>