block-reveal.js
3 months ago
blur-in.js
3 months ago
bounce-in.js
3 months ago
drop-in.js
3 months ago
fade-in.js
3 months ago
flash.js
3 months ago
flicker.js
3 months ago
flip-in.js
3 months ago
glitch-rgb.js
3 months ago
glitch.js
3 months ago
glow-in.js
3 months ago
pulse-neon.js
3 months ago
pulse.js
3 months ago
random-reveal.js
3 months ago
roll-in.js
3 months ago
rotate-in.js
3 months ago
rubber-band.js
3 months ago
scale-in.js
3 months ago
shadow-pop.js
3 months ago
shuffle-text.js
3 months ago
slide-down.js
3 months ago
slide-left.js
3 months ago
slide-right.js
3 months ago
slide-up.js
3 months ago
solid-outline.js
3 months ago
squeeze.js
3 months ago
stretch.js
3 months ago
swing.js
3 months ago
terminal-type.js
3 months ago
tracking-expand.js
3 months ago
typewriter.js
3 months ago
water-drop.js
3 months ago
wave.js
3 months ago
shuffle-text.js
64 lines
| 1 | ( function () { |
| 2 | 'use strict'; |
| 3 | |
| 4 | var SYMBOLS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()'; |
| 5 | var FRAME_DELAY = 30; |
| 6 | |
| 7 | function randomSymbol() { |
| 8 | return SYMBOLS[ Math.floor( Math.random() * SYMBOLS.length ) ]; |
| 9 | } |
| 10 | |
| 11 | function play( el ) { |
| 12 | var text = el.getAttribute( 'data-original-text' ) || el.textContent; |
| 13 | el.setAttribute( 'data-original-text', text ); |
| 14 | el.innerHTML = ''; |
| 15 | |
| 16 | var chars = text.split( '' ); |
| 17 | var spanList = chars.map( function ( char ) { |
| 18 | var span = document.createElement( 'span' ); |
| 19 | span.className = 'frbl-char'; |
| 20 | span.dataset.char = char; |
| 21 | el.appendChild( span ); |
| 22 | return { el: span, char: char, isSpace: char === ' ' }; |
| 23 | } ); |
| 24 | |
| 25 | if ( window.FrblWordWrap ) { window.FrblWordWrap( el ); } |
| 26 | |
| 27 | var frame = 0; |
| 28 | |
| 29 | function update() { |
| 30 | var allDone = true; |
| 31 | |
| 32 | spanList.forEach( function ( item, i ) { |
| 33 | if ( item.isSpace ) { item.el.textContent = ' '; return; } |
| 34 | |
| 35 | var startFrame = i * 2; |
| 36 | var endFrame = startFrame + 15; |
| 37 | |
| 38 | if ( frame < startFrame ) { |
| 39 | allDone = false; |
| 40 | item.el.textContent = ''; |
| 41 | } else if ( frame < endFrame ) { |
| 42 | allDone = false; |
| 43 | item.el.textContent = randomSymbol(); |
| 44 | } else { |
| 45 | item.el.textContent = item.char; |
| 46 | } |
| 47 | } ); |
| 48 | |
| 49 | frame++; |
| 50 | |
| 51 | if ( ! allDone ) { |
| 52 | setTimeout( function () { requestAnimationFrame( update ); }, FRAME_DELAY ); |
| 53 | } else { |
| 54 | el._frblLoop && setTimeout( function () { play( el ); }, 2500 ); |
| 55 | } |
| 56 | } |
| 57 | |
| 58 | update(); |
| 59 | } |
| 60 | |
| 61 | window.FrblAnimations = window.FrblAnimations || {}; |
| 62 | window.FrblAnimations['shuffle-text'] = play; |
| 63 | } )(); |
| 64 |