Demo Download
The idea is to blur text and make it appear with a rotation while animating the space between the letters. This can be achieved in a variety of ways using properties like the new CSS filters, animating padding or margin and more. Here we’ll simply use text shadows and letter-spacing to achieve the desired effect. Since we will need to control each letter, we’ll use Dave Rupert’s Lettering.js to wrap the words and letters into multiple spans.
The idea is to have a couple of sentences fade in with the aforementioned effect, so we’ll want to wrap every appearing bit into an
h2:<div class="os-phrases"> <h2>Sometimes it's better</h2> <h2>to hide</h2> <h2>in order to</h2> <h2>survive evil</h2> <h2>Thanatos</h2> <h2>This fall</h2> <h2>Prepare</h2> <h2>Refresh to replay</h2></div>Now that we have the pieces of the sentences in place, let’s apply lettering to wrap every word and letter into a span. We will actually need a letter to be wrapped into two spans because we want to use perspective on each single letter. So let’s go nuts and do this:
$("#os-phrases > h2").lettering('words').children("span").lettering().children("span").lettering();This will created the following insane structure:
<div class="os-phrases" id="os-phrases"> <h2> <span class="word1"> <span class="char1"> <span class="char1"> S </span> </span> <span class="char2"> <span class="char1"> o </span> </span> <span class="char3"> <span class="char1"> m </span> </span> <!-- ... --> </span> <!-- /word1 --> <!-- ... --> </h2> <h2> <!-- ... --> </h2> <!-- ... --></div>Now we styling and animate with css follows Note that the CSS will not contain any vendor prefixes, but you will find them in the files. Our heading will be placed blatantly on the screen, absolutely, occupying all space:
.os-phrases h2 { font-family: 'Dosis', 'Lato', sans-serif; font-size: 70px; font-weight: 200; height: 100%; width: 100%; overflow: hidden; text-transform: uppercase; padding: 0; margin: 0; position: absolute; top: 0; left: 0; letter-spacing: 14px; text-align: center;}.os-phrases h2,.os-phrases h2 > span { height: 100%; /* Centering with flexbox */ display: flex; flex-direction: row; justify-content: center; align-items: center;}.os-phrases h2 > span { margin: 0 15px;}.os-phrases h2 > span > span { display: inline-block; perspective: 1000px; transform-origin: 50% 50%;}.os-phrases h2 > span > span > span { display: inline-block; color: hsla(0,0%,0%,0); transform-style: preserve-3d; transform: translate3d(0,0,0); animation: OpeningSequence 5.2s linear forwards;}.os-phrases h2:nth-child(2) > span > span > span { animation-delay: 5s;}.os-phrases h2:nth-child(3) > span > span > span { animation-delay: 10s;}.os-phrases h2:nth-child(4) > span > span > span { animation-delay: 15s;}.os-phrases h2:nth-child(5) > span > span > span { font-size: 150px; animation-delay: 21s; animation-duration: 8s;}.os-phrases h2:nth-child(6) > span > span > span { animation-delay: 30s;}.os-phrases h2:nth-child(7) > span > span > span { animation-delay: 34s;}@keyframes OpeningSequence { 0% { text-shadow: 0 0 50px #fff; letter-spacing: 80px; opacity: 0.2; transform: rotateY(-90deg); } 50% { text-shadow: 0 0 1px #fff; letter-spacing: 14px; opacity: 0.8; transform: rotateY(0deg); } 85% { text-shadow: 0 0 1px #fff; opacity: 0.8; transform: rotateY(0deg) translateZ(100px); } 100% { text-shadow: 0 0 10px #fff; opacity: 0; transform: translateZ(130px); pointer-events: none; }}.os-phrases h2:nth-child(8) > span > span > span { font-size: 30px; animation: FadeIn 4s linear 40s forwards;}@keyframes FadeIn { 0% { opacity: 0; text-shadow: 0 0 50px #fff; } 100% { opacity: 0.8; text-shadow: 0 0 1px #fff; }}/* Bold words */.os-phrases h2:first-child .word3,.os-phrases h2:nth-child(2) .word2,.os-phrases h2:nth-child(4) .word2 { font-weight: 600;}Demo Download
