Created
May 29, 2012 19:54
-
-
Save jayrobinson/2830334 to your computer and use it in GitHub Desktop.
A Typewriter Effect with WebKit Transitions
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Forked it in this gist (https://gist.github.com/2830352) to make an easy to demo fiddle.
http://jsfiddle.net/gh/gist/jquery/1.7.1/2830352/ It doesn't require jQuery but the jsFiddle syntax for displaying gists requires a framework to be included in the URL, I think.