Part of the SplitText Collection
Forked from GreenSock's Pen SplitText: Random Words.
A Pen by Captain Anonymous on CodePen.
| <link href='http://fonts.googleapis.com/css?family=Asap:400,700' rel='stylesheet' type='text/css'> | |
| <div id="quote">Deadlines are looming. You've got to deliver something that looks amazing, packed with lots of whiz-bang effects that run smoothly on various machines. No time to reinvent the wheel. You need a reliable tool set that helps you live up to your reputation as a coding Rock Star.</div> | |
| /* | |
| See http://www.greensock.com/splittext/ for details. | |
| This demo uses SplitText which is a membership benefit of Club GreenSock, http://www.greensock.com/club/ | |
| */ | |
| var mySplitText = new SplitText("#quote", {type:"words"}), | |
| tl = new TimelineLite(), | |
| numWords = mySplitText.words.length; | |
| for(var i = 0; i < numWords; i++){ | |
| tl.from(mySplitText.words[i], 1, {force3D:true, x:Math.random() * 500, y:Math.random() * 500, scale:Math.random() * 2, opacity:0}, Math.random()); | |
| } | |
Part of the SplitText Collection
Forked from GreenSock's Pen SplitText: Random Words.
A Pen by Captain Anonymous on CodePen.
| body{ | |
| font-family: 'Asap', Arial, Helvetica, sans-serif; | |
| color:white; | |
| background:black url(http://s.cdpn.io/16327/texture_bg.jpg) no-repeat 50% 0px; | |
| overflow:hidden; | |
| } | |
| #quote{ | |
| -webkit-transform: translate3d(0, 0, 0); | |
| font-size:24px; | |
| line-height:36px; | |
| color:#dedede; | |
| margin:50px auto; | |
| width:800px; | |
| } | |
| #quote div{ | |
| -webkit-font-smoothing: antialiased; | |
| -moz-font-smoothing:antialiased; | |
| } |