'Opening sequence' text effect.
A Pen by Sebastian Schepis on CodePen.
<div class="container"> | |
<div class="os-phrases" id="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> | |
</div><!-- /container --> | |
'Opening sequence' text effect.
A Pen by Sebastian Schepis on CodePen.
$("#os-phrases > h2") | |
.css('opacity', 1).lettering( 'words' ) | |
.children( "span" ).lettering() | |
.children( "span" ).lettering(); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="http://cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js"></script> |
/* General Demo Style */ | |
@import url(http://fonts.googleapis.com/css?family=Dosis:200,600); | |
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } | |
body, html { font-size: 100%; padding: 0; margin: 0; height: 100%;} | |
/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */ | |
.clearfix:before, .clearfix:after { content: " "; display: table; } | |
.clearfix:after { clear: both; } | |
body { | |
font-family: 'Dosis', Calibri, Arial, sans-serif; | |
color: #fff; | |
background: #000; | |
} | |
a { | |
color: #f0f0f0; | |
text-decoration: none; | |
} | |
a:hover { | |
color: #fff; | |
} | |
/* Header Style */ | |
.codrops-top { | |
text-transform: uppercase; | |
position: relative; | |
z-index: 1000; | |
font-size: 0.68em; | |
border-bottom: 1px solid rgba(255,255,255,0.2); | |
line-height: 2.2; | |
} | |
.codrops-top a { | |
padding: 0 1em; | |
letter-spacing: 0.1em; | |
color: rgba(255,255,255,0.2); | |
display: inline-block; | |
} | |
.codrops-top a:hover { | |
color: rgba(255,255,255,0.9); | |
} | |
.codrops-top span.right { | |
float: right; | |
} | |
.codrops-top span.right a { | |
float: left; | |
display: block; | |
} | |
.os-phrases h2 { | |
font-family: 'Dosis', 'Lato', sans-serif; | |
font-size: 70px; | |
font-weight: 200; | |
width: 100%; | |
overflow: hidden; | |
text-transform: uppercase; | |
padding: 0; | |
margin: 0; | |
position: absolute; | |
top: 0; | |
left: 0; | |
letter-spacing: 14px; | |
text-align: center; | |
opacity: 0; | |
} | |
.os-phrases h2, | |
.os-phrases h2 > span { | |
height: 100%; | |
/* Centering with flexbox */ | |
display: -webkit-box; | |
display: -moz-box; | |
display: -ms-flexbox; | |
display: -webkit-flex; | |
display: flex; | |
-webkit-flex-direction: row; | |
-ms-flex-direction: row; | |
flex-direction: row; | |
-webkit-box-pack: center; | |
-moz-box-pack: center; | |
-webkit-justify-content: center; | |
-ms-flex-pack: center; | |
justify-content: center; | |
-webkit-box-align: center; | |
-moz-box-align: center; | |
-webkit-align-items: center; | |
-ms-flex-align: center; | |
align-items: center; | |
} | |
.os-phrases h2 > span { | |
margin: 0 15px; | |
} | |
.os-phrases h2 > span > span { | |
display: inline-block; | |
-webkit-perspective: 1000px; | |
-moz-perspective: 1000px; | |
perspective: 1000px; | |
-webkit-transform-origin: 50% 50%; | |
-moz-transform-origin: 50% 50%; | |
transform-origin: 50% 50%; | |
} | |
.os-phrases h2 > span > span > span { | |
display: inline-block; | |
color: hsla(0,0%,0%,0); | |
-webkit-transform-style: preserve-3d; | |
-moz-transform-style: preserve-3d; | |
transform-style: preserve-3d; | |
-webkit-transform: translate3d(0,0,0); | |
-moz-transform: translate3d(0,0,0); | |
transform: translate3d(0,0,0); | |
-webkit-animation: OpeningSequence 5.2s linear forwards; | |
-moz-animation: OpeningSequence 5.2s linear forwards; | |
animation: OpeningSequence 5.2s linear forwards; | |
} | |
.os-phrases h2:nth-child(2) > span > span > span { | |
-webkit-animation-delay: 5s; | |
-moz-animation-delay: 5s; | |
animation-delay: 5s; | |
} | |
.os-phrases h2:nth-child(3) > span > span > span { | |
-webkit-animation-delay: 10s; | |
-moz-animation-delay: 10s; | |
animation-delay: 10s; | |
} | |
.os-phrases h2:nth-child(4) > span > span > span { | |
-webkit-animation-delay: 15s; | |
-moz-animation-delay: 15s; | |
animation-delay: 15s; | |
} | |
.os-phrases h2:nth-child(5) > span > span > span { | |
font-size: 150px; | |
-webkit-animation-delay: 21s; | |
-moz-animation-delay: 21s; | |
animation-delay: 21s; | |
-webkit-animation-duration: 8s; | |
-moz-animation-duration: 8s; | |
animation-duration: 8s; | |
} | |
.os-phrases h2:nth-child(6) > span > span > span { | |
-webkit-animation-delay: 30s; | |
-moz-animation-delay: 30s; | |
animation-delay: 30s; | |
} | |
.os-phrases h2:nth-child(7) > span > span > span { | |
-webkit-animation-delay: 34s; | |
-moz-animation-delay: 34s; | |
animation-delay: 34s; | |
} | |
@-webkit-keyframes OpeningSequence { | |
0% { | |
text-shadow: 0 0 50px #fff; | |
letter-spacing: 80px; | |
opacity: 0; | |
-webkit-transform: rotateY(-90deg); | |
} | |
50% { | |
text-shadow: 0 0 1px #fff; | |
letter-spacing: 14px; | |
opacity: 0.8; | |
-webkit-transform: rotateY(0deg); | |
} | |
85% { | |
text-shadow: 0 0 1px #fff; | |
opacity: 0.8; | |
-webkit-transform: rotateY(0deg) translateZ(100px); | |
} | |
100% { | |
text-shadow: 0 0 10px #fff; | |
opacity: 0; | |
-webkit-transform: translateZ(130px); | |
pointer-events: none; | |
} | |
} | |
@-moz-keyframes OpeningSequence { | |
0% { | |
text-shadow: 0 0 50px #fff; | |
letter-spacing: 80px; | |
opacity: 0.2; | |
-moz-transform: rotateY(-90deg); | |
} | |
50% { | |
text-shadow: 0 0 1px #fff; | |
letter-spacing: 14px; | |
opacity: 0.8; | |
-moz-transform: rotateY(0deg); | |
} | |
85% { | |
text-shadow: 0 0 1px #fff; | |
opacity: 0.8; | |
-moz-transform: rotateY(0deg) translateZ(100px); | |
} | |
100% { | |
text-shadow: 0 0 10px #fff; | |
opacity: 0; | |
-moz-transform: translateZ(130px); | |
pointer-events: none; | |
} | |
} | |
@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; | |
-webkit-animation: FadeIn 4s linear 40s forwards; | |
-moz-animation: FadeIn 4s linear 40s forwards; | |
animation: FadeIn 4s linear 40s forwards; | |
} | |
@-webkit-keyframes FadeIn { | |
0% { | |
opacity: 0; | |
text-shadow: 0 0 50px #fff; | |
} | |
100% { | |
opacity: 0.8; | |
text-shadow: 0 0 1px #fff; | |
} | |
} | |
@-moz-keyframes FadeIn { | |
0% { | |
opacity: 0; | |
text-shadow: 0 0 50px #fff; | |
} | |
100% { | |
opacity: 0.8; | |
text-shadow: 0 0 1px #fff; | |
} | |
} | |
@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; | |
} |