funnyText.js

by bizamajig

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="table">
	<div class="tableCell">
		<div class="text1"> funnyText.js</div>
		<div class="text2"> This is an example </div>
	</div>
</div>

CSS

.charWrap {
    display:inline-block;
    position:relative;
    overflow: hidden;
}
.funnyText span.left, 
.funnyText span.right,
.funnyText span.top,
.funnyText span.bottom {
    position:absolute;
}
.funnyText .charWrap {
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;/** Chrome & Safari **/
    -moz-transition: all 0.4s ease-in-out;/** Firefox **/
    -o-transition: all 0.4s ease-in-out;/** Opera **/
}
.funnyText .charWrap .top {
    top:0;
}
.funnyText .charWrap .left {
    left:0;
}
.funnyText .charWrap .right {
    right:0;
}
.funnyText .charWrap .bottom {
    bottom:0;
}
.funnyText .character {
    overflow:hidden;
    display:inline-block;
}

		.text1, .text2{
			display:block;
			text-align:center;
		}
		body{
			font-family:arial;
		}
		

		.text2 span {
			background-color: #DFE2DB;
		}
		.text2 span.active {
			background-color: #3B3738;
		}
		
		
		/* Web design
		* --------------------------------------- */
		.table{
			display:table;
			width:100%;
			height: 100%;
		}
		.tableCell{
			display:table-cell;
			vertical-align: middle;
			width:100%;
			height: 100%;
		}
		body, html{
			margin:0;
			padding:0;
			height:100%;
			background-color: #00AEEF;
		}

JavaScript

/**
 * funnyText.js 0.3 Beta
 * https://github.com/alvarotrigo/funnyText.js
 * MIT licensed
 *
 * Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo
 */

(function($){
	$.fn.funnyText = function(options){
		
		// Create some defaults, extending them with any options that were provided
		options = $.extend({
			'speed': 700,
			'borderColor': 'black',
			'activeColor': 'white',
			'color': 'black',
			'fontSize': '7em',
			'direction': 'both'
		}, options);

		var that = $(this);
		
		that.addClass('funnyText');
		
		var original = $(this);
		var characters = $.trim(original.text()).split('');
		
		
		var positionsY = ['top', 'bottom'];
		var positionsX = ['left', 'right'];

		var activePositionX, activePositionY, normalPositionX, normalPositionY;
		var previousPosition;

		//removing the original text
		original.html('');

		//append the CSS styles
		var style = $('<style>'+that.selector +'.funnyText span.active { color: ' + options.activeColor + '; text-shadow: -1px 0 '+options.borderColor+', 0 1px '+options.borderColor+', 1px 0 '+options.borderColor+', 0 -1px '+options.borderColor+';} '+that.selector +'.funnyText span{color: ' + options.color +'; font-size:' + options.fontSize + ';}</style>')
		$('html > head').append(style);


		//for each character
		for (var i = 0; i < characters.length; i++){
			normalPositionY = positionsY[getRandom(0, 100) % 2];
			normalPositionX = positionsX[getRandom(0, 100) % 2];

			if(characters[i]  == ' '){
				characters[i] = '&nbsp;';
			}
			
			var visibleChar = '<span class="normal  ' + normalPositionY + ' ' + normalPositionX + '">' + characters[i] + '</span>';

			//avoid repeating the same values two consecutive letters 
			do{
				activePositionXY = getNewPosition(normalPositionX, normalPositionY);
			}while(activePositionXY == previousPosition && options.direction == 'both');

			previousPosition = activePositionXY;

			var activeChar = '<span class="active ' + activePositionXY + '">' + characters[i] +...