jayrobinson/typewriter.html

## typewriter.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>A Typewriter Effect with WebKit Transitions</title>
<meta name="author" content="Jay Robinson, http://jayrobinson.org">

<style type="text/css">

* {
    margin: 0;
    padding: 0;
}

body {
    font: normal 16px/1.8 monospace;
    margin: 100px auto;
    padding: 0 0 100px;
    position: relative;
    width: 800px;
}

h1 {
    font-size: 32px;
    white-space: nowrap;
}

p.byline {
    color: #444;
    font-size: 12px;
    margin: 0 0 48px;
}

p {
    margin: 0 0 1em;
    width: 550px;
}

blockquote {
    border-left: 2px solid #000;
    padding-left: 1.8em;
}

span {
    opacity: 0;
    -webkit-transition: opacity 0.2s ease-in;
}

footer#sosumi {
    color: #ccc;
    font-size: 16px;
    position: absolute;
        bottom: 0;
        left: 0;
}

</style>
</head>
<body>

<h1>A Typewriter Effect with WebKit&nbsp;Transitions</h1>
<p class="byline">by <a href="http://jayrobinson.org">Jay Robinson</a></p>

<blockquote>
    <p id="lipsum">&ldquo;Browser makers like Microsoft and Mozilla should swallow their pride, take the unique features they&rsquo;ve each brought to their respective browsers, and start figuring out how to develop them on top of WebKit &mdash; it&rsquo;s the quickest way for web development to move forward as a whole.&rdquo; &mdash; David Kaneda</p>
</blockquote>

<!-- <footer id="sosumi">&#63743;</footer> -->

<script type="text/javascript">

var Typewriter = {
    sourceID:'lipsum',
    mySource:'',
    myString:'',
    allSpans: new Array(),
    firstSpan:'',

    init:function(){
        Typewriter.mySource = document.getElementById(Typewriter.sourceID);
        Typewriter.myString = Typewriter.mySource.innerHTML;
        Typewriter.wrapSpans();
        Typewriter.allSpans = document.getElementsByTagName('span');
        Typewriter.waitTransitions();
        Typewriter.firstSpan = Typewriter.allSpans[0];
        Typewriter.firstSpan.style.opacity = '1';
    },

    wrapSpans:function(){
        var temp1,temp2;
        for( var i=0; i<Typewriter.myString.length; i++){
            temp1 = '<span>' + Typewriter.myString.charAt(i) + '</span>';
            if(i==0){
                temp2 = temp1;
            } else {
                temp2 +=temp1;
            }
        }
        Typewriter.mySource.innerHTML = temp2;
    },

    waitTransitions:function(){
        for( var i=0; i<Typewriter.allSpans.length; i++ ){
            Typewriter.allSpans[i].addEventListener('webkitTransitionEnd', function(){
                this.nextSibling.style.opacity = '1';
            }, false);
        }
    }
}

window.onload = function(){
    Typewriter.init();
}

</script>

</body>
</html>
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">

	<title>A Typewriter Effect with WebKit Transitions</title>
	<meta name="author" content="Jay Robinson, http://jayrobinson.org">

	<style type="text/css">

	* {
	margin: 0;
	padding: 0;
	}

	body {
	font: normal 16px/1.8 monospace;
	margin: 100px auto;
	padding: 0 0 100px;
	position: relative;
	width: 800px;
	}

	h1 {
	font-size: 32px;
	white-space: nowrap;
	}

	p.byline {
	color: #444;
	font-size: 12px;
	margin: 0 0 48px;
	}

	p {
	margin: 0 0 1em;
	width: 550px;
	}

	blockquote {
	border-left: 2px solid #000;
	padding-left: 1.8em;
	}

	span {
	opacity: 0;
	-webkit-transition: opacity 0.2s ease-in;
	}

	footer#sosumi {
	color: #ccc;
	font-size: 16px;
	position: absolute;
	bottom: 0;
	left: 0;
	}

	</style>
	</head>
	<body>

	<h1>A Typewriter Effect with WebKit Transitions</h1>
	<p class="byline">by <a href="http://jayrobinson.org">Jay Robinson</a></p>

	<blockquote>
	<p id="lipsum">“Browser makers like Microsoft and Mozilla should swallow their pride, take the unique features they’ve each brought to their respective browsers, and start figuring out how to develop them on top of WebKit — it’s the quickest way for web development to move forward as a whole.” — David Kaneda</p>
	</blockquote>

	<!-- <footer id="sosumi"></footer> -->

	<script type="text/javascript">

	var Typewriter = {
	sourceID:'lipsum',
	mySource:'',
	myString:'',
	allSpans: new Array(),
	firstSpan:'',

	init:function(){
	Typewriter.mySource = document.getElementById(Typewriter.sourceID);
	Typewriter.myString = Typewriter.mySource.innerHTML;
	Typewriter.wrapSpans();
	Typewriter.allSpans = document.getElementsByTagName('span');
	Typewriter.waitTransitions();
	Typewriter.firstSpan = Typewriter.allSpans[0];
	Typewriter.firstSpan.style.opacity = '1';
	},

	wrapSpans:function(){
	var temp1,temp2;
	for( var i=0; i<Typewriter.myString.length; i++){
	temp1 = '<span>' + Typewriter.myString.charAt(i) + '</span>';
	if(i==0){
	temp2 = temp1;
	} else {
	temp2 +=temp1;
	}
	}
	Typewriter.mySource.innerHTML = temp2;
	},

	waitTransitions:function(){
	for( var i=0; i<Typewriter.allSpans.length; i++ ){
	Typewriter.allSpans[i].addEventListener('webkitTransitionEnd', function(){
	this.nextSibling.style.opacity = '1';
	}, false);
	}
	}
	}

	window.onload = function(){
	Typewriter.init();
	}

	</script>

	</body>
	</html>