glitch.js
| 1 | ( function () { |
| 2 | 'use strict'; |
| 3 | |
| 4 | var DURATION = 0.4; |
| 5 | var DELAY = 0.1; |
| 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 = 'frblGlitch ' + 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['glitch'] = play; |
| 29 | } )(); |
| 30 |