Part of the SplitText Collection
Forked from GreenSock's Pen SplitText: Words dancing in 3D.
A Pen by valery sntx 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 quote = document.getElementById("quote"), | |
mySplitText = new SplitText(quote, {type:"words"}), | |
tl = new TimelineMax({delay:0.5, repeat:10, repeatDelay:1}), | |
numWords = mySplitText.words.length; | |
//prep the quote div for 3D goodness | |
TweenLite.set(quote, {transformPerspective:600, perspective:300, transformStyle:"preserve-3d", autoAlpha:1}); | |
//intro sequence | |
for(var i = 0; i < numWords; i++){ | |
tl.from(mySplitText.words[i], 1.5, {z:randomNumber(-500,300), opacity:0, rotationY:randomNumber(-40, 40)}, Math.random()*1.5); | |
} | |
tl.from(quote, tl.duration(), {rotationY:180, transformOrigin:"50% 75% 200", ease:Power2.easeOut}, 0); | |
//randomly change z of each word, map opacity to z depth and rotate quote on y axis | |
for(var i = 0; i < numWords; i++){ | |
var z = randomNumber(-50,50) | |
tl.to(mySplitText.words[i], 0.5, {z:z, opacity:rangeToPercent(z, -50, 50)}, "pulse"); | |
} | |
tl.to(quote, 0.5, {rotationY:20}, "pulse"); | |
//randomly change z of each word, map opacity to z depth and rotate quote on xy axis | |
for(var i = 0; i < numWords; i++){ | |
var z = randomNumber(-100,100) | |
tl.to(mySplitText.words[i], 0.5, {z:z, opacity:rangeToPercent(z, -100, 100)}, "pulse2"); | |
} | |
tl.to(quote, 0.5, {rotationX:-35, rotationY:0}, "pulse2"); | |
//reset the quote to normal position | |
tl.to(mySplitText.words, 0.5, {z:0, opacity:1}, "reset") | |
tl.to(quote, 0.5, {rotationY:0, rotationX:0}, "reset"); | |
//add explode label 2 seconds after reset animation is done | |
tl.add("explode", "+=2") | |
//add explode effect | |
for(var i = 0; i < numWords; i++){ | |
tl.to(mySplitText.words[i], 0.6, {z:randomNumber(100, 500), opacity:0, rotation:randomNumber(360, 720), rotationX:randomNumber(-360, 360), rotationY:randomNumber(-360, 360)}, "explode+=" + Math.random()*0.2); | |
} | |
//TRY THIS FOR SUPER-SLOW-MO | |
//tl.timeScale(0.2); | |
//some helper functions | |
function randomNumber(min, max){ | |
return Math.floor(Math.random() * (1 + max - min) + min); | |
} | |
function rangeToPercent(number, min, max){ | |
return ((number - min) / (max - min)); | |
} |
Part of the SplitText Collection
Forked from GreenSock's Pen SplitText: Words dancing in 3D.
A Pen by valery sntx 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; | |
visibility:hidden; | |
} | |
#quote div{ | |
-webkit-font-smoothing: antialiased; | |
-moz-font-smoothing:antialiased; | |
} |