block-reveal.js
1 month ago
blur-in.js
1 month ago
bounce-in.js
1 month ago
drop-in.js
1 month ago
fade-in.js
1 month ago
flash.js
1 month ago
flicker.js
1 month ago
flip-in.js
1 month ago
glitch-rgb.js
1 month ago
glitch.js
1 month ago
glow-in.js
1 month ago
pulse-neon.js
1 month ago
pulse.js
1 month ago
random-reveal.js
1 month ago
roll-in.js
1 month ago
rotate-in.js
1 month ago
rubber-band.js
1 month ago
scale-in.js
1 month ago
shadow-pop.js
1 month ago
shuffle-text.js
1 month ago
slide-down.js
1 month ago
slide-left.js
1 month ago
slide-right.js
1 month ago
slide-up.js
1 month ago
solid-outline.js
1 month ago
squeeze.js
1 month ago
stretch.js
1 month ago
swing.js
1 month ago
terminal-type.js
1 month ago
tracking-expand.js
1 month ago
typewriter.js
1 month ago
water-drop.js
1 month ago
wave.js
1 month ago
wave.js
30 lines
| 1 | ( function () { |
| 2 | 'use strict'; |
| 3 | |
| 4 | var DURATION = 0.6; |
| 5 | var DELAY = 0.08; |
| 6 | |
| 7 | function play( el ) { |
| 8 | var text = el.getAttribute( 'data-original-text' ) || el.textContent; |
| 9 | el.setAttribute( 'data-original-text', text ); |
| 10 | el.innerHTML = ''; |
| 11 | |
| 12 | text.split( '' ).forEach( function ( char, i ) { |
| 13 | var span = document.createElement( 'span' ); |
| 14 | span.textContent = char; |
| 15 | span.className = 'frbl-char'; |
| 16 | span.style.cssText = 'display:inline-block;white-space:pre;opacity:0;'; |
| 17 | span.style.animation = 'frblWave ' + DURATION + 's forwards'; |
| 18 | span.style.animationDelay = ( i * DELAY ) + 's'; |
| 19 | el.appendChild( span ); |
| 20 | } ); |
| 21 | |
| 22 | var totalMs = ( text.length * DELAY + DURATION ) * 1000 + 2500; |
| 23 | if ( window.FrblWordWrap ) { window.FrblWordWrap( el ); } |
| 24 | el._frblLoop && setTimeout( function () { play( el ); }, totalMs ); |
| 25 | } |
| 26 | |
| 27 | window.FrblAnimations = window.FrblAnimations || {}; |
| 28 | window.FrblAnimations['wave'] = play; |
| 29 | } )(); |
| 30 |