Jake Paris

Fade-in text: jQuery plugin

This is a basic plugin for jQuery which adds an effect for slowly fading in text. There may be other plugins out there that have similar functionality, but this was an attempt to try building such a thing.

Demo

See the Pen Fade In Text by Jake P (@jakeparis) on CodePen.0

The Code

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 id="typewriter-text" style="z-index: 50; position: absolute;"></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);
	}
});

Make a Comment

All fields are required. No one will see your email other than me.