Skip to content

Instantly share code, notes, and snippets.

Created May 28, 2014 11:12
Show Gist options
  • Save anonymous/2c2e759bd73e49874b5f to your computer and use it in GitHub Desktop.
Save anonymous/2c2e759bd73e49874b5f to your computer and use it in GitHub Desktop.
A Pen by Anonasaurus Rex.
#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
/* 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 );
@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;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment