Text Effects

by jakie8

HTML

<div class="target">Sup, Bitch</div>

CSS

.text-effect span{
    display:inline-block;
    -webkit-transition: all 0.6s ease; 
    -moz-transition: all 0.6s ease; 
    -o-transition: all 0.6s ease; 
    transition: all 0.6s ease; 
}
.text-effect.scale span{
    opacity:0;
    -webkit-transform:scale(0.7);
}
.text-effect.scale span.active{
    opacity:1;
    -webkit-transform:scale(1);
}

.text-effect.blur span{
    opacity:0;
    -webkit-filter:blur(10px);
}
.text-effect.blur span.active{
    opacity:1;
    -webkit-filter:blur(0px);
}





body{
    font-size:36px;
    font-family:arial;
}

JavaScript

var textEffects = (function($) {

    var _target = $('.target'),
        _speed = 50,

        _textSplit = function() {
            _target.addClass('text-effect');
            var tArray = (_target.text()).split(''), ihtml = '', i;
            for(i in tArray){
                ihtml += '<span>'+tArray[i]+'</span>';
            }
            _target.html(ihtml);
        },
        _textEffect = function(){
            var count = 0;
            _target.find('span').each(function(){
                var _el = $(this);
                count++;
                setTimeout(function(){
                    _el.addClass('active');
                }, _speed*count);                
            });
        },
        
        beginScale = function() {
            _target.addClass('scale');
            _textSplit();
            _textEffect();
        },
        beginBlur = function() {
            _target.addClass('blur');
            _textSplit();
            _textEffect();
        }

        return {
            scale: beginScale,
            blur: beginBlur
        };

})(window.jQuery);

textEffects.scale();