Skip to content

Instantly share code, notes, and snippets.

@shshaw shshaw/index.html
Created Aug 23, 2018

Embed
What would you like to do?
Lightning Round ⚡ Text Animations
<a href="https://twitch.tv/keyframers" target="_blank" data-keyframers-credit style="color: #FFF">Watch the @keyframers live, Monday @ 21:00 EST</a>
<script src="https://codepen.io/shshaw/pen/QmZYMG.js"></script>
<div class="lightning-round">
<span class="text" data-splitting> LIGHTNING ROUND </span>
<span class="zap" data-splitting>⚡</span>
</div>
<div class="rerun">Click to replay</div>
Splitting();
var lr = document.querySelector('.lightning-round');
document.body.addEventListener('click',()=>{
var newone = lr.cloneNode(true);
lr.parentNode.replaceChild(newone, lr);
lr = newone;
});
// setTimeout(()=>{ document.body.click(); },4000);
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
$delay: 6s;
html, body { background: #000; } //#2B2E31; color: #FFF; }
html { height: 100%; display: flex; overflow: hidden; }
body { margin: auto; }
/* ---------------------------------- */
@import url('https://fonts.googleapis.com/css?family=Orbitron:700');
.lightning-round {
font-family: 'Orbitron', monospace;
font-weight: 700;
font-size: 8vw;
// @media (min-width: 600px) { font-size: 120px; }
perspective: 200px;
perspective-origin: top center;
color: #FFD950;
.word {
transform: rotateX(15deg);
display: inline-block;
transform-style: preserve-3d;
animation: glitch-bounce .5s steps(1) infinite;
@keyframes glitch-bounce {
20% {
transform: rotateX(15deg) translate3d(-1%, 0%, 0px);
}
40% {
transform: rotateX(15deg) translate3d(-3%, 1%, -.1em);
}
60% {
transform: rotateX(15deg) translate3d(1%, -1%, 0px);
}
80% {
transform: rotateX(15deg) translate3d(-2%, 1%, .1em);
}
}
}
.char {
display: inline-block;
transform-style: preserve-3d;
position: relative;
color: #444;
&:before,
&:after {
visibility: visible;
content: attr(data-char);
position: absolute;
top: 0;
left: 0;
opacity: 0.4;
transform-style: preserve-3d;
transform: translate3d(0, 3px, -.25em);
}
&:after {
transform: translate3d(0, -3px, .25em);
color: #FFD950;
opacity: 1;
}
}
.text .char {
transform-origin: center bottom;
animation:
char-in 1s cubic-bezier(.5, 0, .5, 1) backwards,
char-out .7s cubic-bezier(.8, 0, .5, 1) forwards;
animation-delay:
calc(0s + (.2s * (var(--distance-percent)) )),
calc(#{$delay} + (.15s * ( var(--distance-percent)) ));
}
}
@keyframes char-in {
0% {
opacity: 0;
transform:
translateY(-4em)
translateX(
calc(2em * var(--distance-percent))
)
translateZ(
calc(3em + (8em * var(--distance-percent)))
);
}
//80%, 100% { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes char-out {
100% {
opacity: 0;
transform:
translateY(4em)
translateZ(
calc(3em + (8em * var(--distance-percent)))
);
}
}
.zap {
font-size: 4em;
display: block;
z-index: -1;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 1em;
height: 1em;
margin: auto;
transform: translateZ(0);
animation: zap-in .75s cubic-bezier(.5,0,.2,1) .3s backwards,
zap-out 1.75s cubic-bezier(.8, 0, .5, 1) #{$delay} forwards;//cubic-bezier(.5, 0, .5, 1);
.char.char:after {
opacity: .2;
transform: translate3d(0, 3px, -.5em);
}
}
@keyframes zap-in {
from {
opacity: 0;
transform: translateY(-100vh) translateZ(-2em);
}
}
@keyframes zap-out {
to {
opacity: 0;
transform: translateY(-2em) translateZ(10em);
}
}
.rerun {
font-family: 'Orbitron', monospace;
font-weight: 700;
color: #FFF;
font-size: 12px;
text-align: center;
margin-top: 3.5em;
animation: fade-in-out 5s linear #{$delay} both;
@keyframes fade-in-out { 0%, 100% { opacity: 0; } 30%, 70% { opacity: 1; } }
}
<link href="https://unpkg.com/splitting/dist/splitting.css" rel="stylesheet" />
<link href="https://unpkg.com/splitting/dist/splitting-cells.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.