Plugin to do bubbly text slides,

index.html

<section id="quotes">
		<div class="quote">
				<p class="text">You guys go on without me! <br/> I'm going to go&hellip; <br/> look for more stuff to steal!</p>
				<p class="attrib">Bender<br/>Futurama</p>
		</div>
 	<div class="quote">
				<p class="text">And I'd do it again! <br/> And perhaps a third time! <br/> But that would be it.</p>
				<p class="attrib">Bender<br/>Futurama</p>
		</div>
</section>

script.js

var $quotes = $('#quotes .quote'),
    opts = { fadeTime: 1000, dwellTime: 8 },
    fadeInQuote,
    fadeOutQuote,
    switchTo,
    active = 1,
    next = 0;

switchTo = function ( to ) {
  var old = active;
  $(quotes[to]).show();
  quotes[old].fadeOutQuote();
  quotes[to].fadeInQuote();
  
  setTimeout( function () { 
    $(quotes[old]).hide(); 
  }, opts.fadeTime );
  active = to;
}

// fancy on the way 
fadeInQuote = function (q) {
  var letters = shuffle( $('span', q) );

  $(letters).each( function (i, l) {
    setTimeout( 
      function () { $(l).animate({opacity: 1}, 100 ); }, 
      ( opts.fadeTime/2 / letters.length * i ) + (opts.fadeTime/2) 
    );
  });
};

// and fancy on the way out.
fadeOutQuote = function (1) {
  var letters = shuffle( $('span', q) );
  
  $(letters).each( function (i) {
    setTimeout(
      function () { $(letters[i]).animate({opacity: 0}, 100 ); }, 
      ( opts.fadeTime/2 / letters.length ) * i 
    );
  });
};


// this is the switchy bit.
switchTo(next);
setInterval( function () {
	next = ( active + 1 ) % quotes.length;
	switchTo(next);
}, opts.dwellTime );



//+ Jonas Raoni Soares 
//@ http://jsfromhell.com/array/shuffle [v1.0]
shuffle = function(o){ //v1.
  for(var j, x, i = o.length; i; j = parseInt(Math.random() * Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
  return o;
};

style.scss

@import "compass";
html, body {
  font-family: 'camingodos-web', 'Myriad Pro', Verdana, sans-serif;
  background: #eee;
  width: 100%;
  height: 100%;
  position: relative;
}

#quotes {
  width: 450px;
  height: 150px;
  margin-left: -225px;
  margin-top: -75px;
  top: 50%; 
  left: 50%;
  position: absolute;

  box-shadow: 2px 3px 15px #ccc;

  .quote {
    position: absolute;
    height: 150px;
    width: 100%;
    top: 75px;
    margin-top: 75px;

    line-height: 1;
    font-weight: bolder;
    text-align: center;
    

    p {
      margin: 0 auto;
    }
    
    .attrib {
      font-size: 50%;
      margin-left: 61%;
      text-align: left;
      font-style: italic;
    }
  }
}