Bubble-y-Text-Fader.markdown

Bubble-y Text Fader

Slides of text change with an effect where each letter fades in on it's own time. Lazy letters...

Forked from Bryan Levay's Pen Bubble-y Text Fader.

A Pen by Anonasaurus Rex on CodePen.

License.

index.jade

#quotes
  .quote
    p.text Everybody's a jerk!
      br 
      | You, me… 
      br 
      | This jerk
    p.attrib
      | Bender
      br
      | Futurama
  .quote
    p.text You guys go on without me! 
      br 
      | I'm going to go… 
      br 
      | look for more stuff to steal!
    p.attrib
      | Bender
      br
      | Futurama
  .quote
    p.text And I'd do it again! 
      br 
      | And perhaps a third time! 
      br 
      | But that would be it.
    p.attrib
      | Bender
      br
      | Futurama

script.js

/* Bryan Levay -- Creative, technically. http://bryanlevay.com */

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


//+ 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;
}; 

// fancy on the way in
fadeInQuote = function (q) {
  var letters = shuffle( $('[class*="char"]', $quotes[q]) );
  
  $($quotes[q]).show();
  $.each( letters, 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 (q) {
  var letters = shuffle( $('[class*="char"]', $quotes[q]) );

  $.each(letters, function (i, l) {
    setTimeout(
      function () { 
        $(l).animate({opacity: 0}, 100 ); 
      }, 
      ( (opts.fadeTime/2) / letters.length ) * i 
    );
  });
  
  setTimeout( function () { 
    $($quotes[q]).hide(); }, 
    opts.fadeTime/2
  );
};

switchTo = function ( to ) {
  var old = active;

  fadeInQuote(to);
  fadeOutQuote(old);

  active = to;
};


$quotes.each( function (i, quote) {
  $(quote).hide();
  $(quote)
  .children('p').lettering('lines')
  .children('[class*=line]').lettering();
  
});

switchTo(next);
setInterval( function () {
  next = ( active + 1 ) % $quotes.length;
  switchTo(next);
}, opts.dwellTime );

style.scss

@import "compass/css3";
html, body {
  width: 100%;
  height: 100%;
}

body {
  font-family: 'Source Sans Pro', 'Myriad Pro', 'Lucida Grande', Verdana, sans-serif;
  background: #e6e6e6;
  color: #333;
  position: relative;
}

#quotes {  
  font-size: 35px;
  font-weight: bold;
  width: 80%;
  height: 150px;
  margin: -75px 10%;
  top: 50%; 
  position: absolute;

  .quote {
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;

    line-height: 1;
    font-weight: bolder;
    text-align: center;
    
    span[class*=line] {
      display: block;
    }
    
    .text { font-weight: 900; }
    p { margin: 25px 0 0; }
    p.attrib {
      font-size: 60%;
      margin: .5em;
      margin-left: 61%;
      text-align: left;
      font-style: italic;
    }
  }
}