.wrap
	h1.split 
View Compiled
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);

html, body, .wrap {
	height: 100%;
}

body {
	background: black;
	overflow: hidden;
	color: white;
	font-family: Open sans;
	
}

.wrap {
	max-width: 800px;
	margin: 0 auto;
}

h1 {
	position: relative;
	perspective: 500px;
	top: 50%;
	padding: 0 20px;
	transform: translateY(-50%);
	font-weight: 300;
	span {
		opacity: 0;
	}
}
View Compiled
// Quotes about learning from goodreads -- http://www.goodreads.com/quotes/tag/learning

var quotes = [
	"“Wisdom is not a product of schooling but of the lifelong attempt to acquire it.”  <br><br>— Albert Einstein",
	"“Live as if you were to die tomorrow. Learn as if you were to live forever.” <br><br>—  Mahatma Gandhi",
	"“Tell me and I forget, teach me and I may remember, involve me and I learn.” <br><br>— Benjamin Franklin",
	"“Study hard what interests you the most in the most undisciplined, irreverent and original manner possible.”<br><br>— Richard Feynman",
	
	"“It is important that students bring a certain ragamuffin, barefoot irreverence to their studies; they are not here to worship what is known, but to question it.”  <br><br>—  Jacob Bronowski"
];

var index = 0;
var max = quotes.length - 1;
var delay = .02;

function random(min, max){
	return (Math.random() * (max - min)) + min;
}

function cycleQuotes(arr, i, sel){
	var el = $(sel);
	var message = arr[i];
	el.html(message);
	var split = new SplitText(el);
	var time = split.chars.length * delay;
	
	$(split.chars).each(function(i){
		TweenMax.from($(this), time, {
			opacity: 0,
			x: 0,
			y: random(-200, 200),
			z: random(500, 1000),
			// scale: .1,
			delay: i * delay,
			yoyo: true,
			repeat: -1,
			repeatDelay: time * 4,
			ease: Power1.easeOut
		});
	});
	
	index = index == max ?  0 : (index + 1);

	setTimeout(function(){
		
		cycleQuotes(quotes, index, ".split");
	}, ((time * 4) + (time * 4)) * 1000);
	
}

$(window).load(function(){
	cycleQuotes(quotes, index, ".split");
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. https://www.greensock.com/js/src/utils/SplitText.min.js
  3. //cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js