<h3>Slowly fading in text</h3>
<p class="js-typewriter">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed urna nunc, cursus vitae lorem ac, pharetra vestibulum enim. Vivamus vitae mi ultricies, venenatis lectus eu, ultricies nibh. Fusce ornare, est quis ornare lacinia, augue leo posuere elit, non mattis nunc quam vel erat. Pellentesque nec sem purus. Etiam non massa justo. Morbi eu quam in sapien malesuada malesuada. Sed eget turpis sapien. Nulla ut velit ac quam consectetur dapibus. Cras consequat tincidunt erat, in maximus sapien varius ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur magna enim, congue a quam consectetur, commodo interdum sapien.</p>
body {
	margin: 1em;
}
h1 {
	font-size: 5em;
}
.js-typewriter {
	visibility: hidden;
}
View Compiled
jQuery(function($){
	$('.js-typewriter').typewrite({
		speed: 35,
		// fadeIn: false
	});
});



jQuery.fn.extend({
    typewrite: function(userArgs){

        var me = this;
        var args = {
            speed: 60,
            callback: false,
            fadeIn: true
        };
        if(typeof userArgs == 'number')
            args.speed = userArgs;
        else {
            args = jQuery.extend(args,userArgs);
        }


        var msg = me.text();
        if( ! msg )
            return false;

        // stop bump
        me.css('position','relative');
        me.html('<span style="z-index:0;opacity:0;">'+msg+'</span>');
        me.css('visibility','visible');
        me.prepend('<span style="z-index:50;position:absolute;" id="typewriter-text"></span>');
        $tt = jQuery('#typewriter-text');

        msg = msg.split('');
        var letter;
        
        var typewriterInterval = window.setInterval(function(){
            if(msg.length) {
                letter = msg.shift();
                
                if(! args.fadeIn) {
                    $tt.append(letter);
                    return;
                }

                letter = '<span class="typewriter-fade-letter" style="display: none;">' + letter + '</span>';
                $tt.append(letter);
                $tt.find('.typewriter-fade-letter').last().fadeIn(300);
            } else {
                window.clearInterval(typewriterInterval);
                if(typeof args.callback == 'function')
                    args.callback();
            }
        },args.speed);
    }
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js