Letter Risers

uh huh

by cyclesax

CSS

.rise {
	height: 75px;
	line-height: 75px;
	font-family: Arial;
	font-size: 75px;
	transition: all .2s;
	-moz-transition: all .2s; 		/* Firefox 4 */
	-webkit-transition: all .2s; /* Safari and Chrome */
	-o-transition: all .2s; 			/* Opera */
}

.rise:hover {
	font-size: 100px;
	cursor: pointer;
}

JavaScript

var word = 'rise to the sounds of sizers';

$(function() {
	var delay = 333;

    //make new div to hold word
    var wordElem = $('<div></div>');

    var ix = word.length;

    //reversing the word to iterate through it backwards. 
    //this increases speed (could have left it out)

    /*
    call slice and reverse on using the Array prototype
    
    ref: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/call
    ref: http://stackoverflow.com/questions/8866537/call-reverse-on-a-string
    */
    var wordReversed = [].slice.call(word).reverse().join('');

    word = wordReversed;

    while(ix--) {//speed iteration pattern
      wordElem.append('<span class="rise">' + word.charAt(ix) + '</span>');
    }

    $('body').append(wordElem);

    var interval = setInterval(function() {
      var randomIx;
        
      wordElem.children().css('font-size', '75px')
      
      letters = wordElem.children(); //get array of child elements within the wordElem
      randomIx = getRandIndex(letters);
      
      letterRiser(letters[randomIx]);

    }, delay);

    function getRandIndex(array) {
      return Math.floor(Math.random()*array.length);
    }

    function letterRiser(elemToRise) {
      elemToRise.style.fontSize = '100px';
    }
		
  });