Skip to content

Instantly share code, notes, and snippets.

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

Embed
What would you like to do?
Splitting Letter Overlap
<div class="text-overlap" data-splitting>Extra<b>v</b>agant</div>
Splitting();
<script src="https://unpkg.com/splitting@1.0.0/dist/splitting.js"></script>
<script src="https://codepen.io/shshaw/pen/5eb6d4e9bfd78e3911ed9d0d0dfce69b"></script>
html { height: 100%; display: flex;}
body { margin: auto; }
html { text-align: center; background: #2A363B; color: #FFF; }
@import url('https://fonts.googleapis.com/css?family=Oswald:700');
.text-overlap {
font-family: 'Oswald', serif;
font-weight: 700;
font-size: 13vw;
text-transform: uppercase;
}
.text-overlap.splitting {
.char {
margin-right: -0.12em; // Overlapping
text-shadow: 0px 0px 15px rgba(0,0,0,0.5);
animation:
slide-in 2.5s cubic-bezier(0,.65,.29,1) 0s both,
fade-in 1.25s linear both;
animation-delay: calc(1s + (0.5s * var(--distance-percent)));
@keyframes slide-in {
0% {
transform: translateX(1em);
transform: translateX( calc(0.12em * var(--char-offset)) ) translateZ(0px);
// Start from original position
}
}
@keyframes fade-in {
from { opacity: 0; }
}
}
b {
display: inline-block;
color: #CF4647;
animation-name: slide-in-v, fade-in;
animation-fill-mode: both;
animation-delay: 1s;
animation-duration: 1.75s, 1s;
animation-timing-function: cubic-bezier(0,.7,.1,1), linear;
@keyframes slide-in-v {
0% {
opacity: 0;
transform: translateX(1em);
transform: translateY(-50vh)
}
}
~ * .char {
z-index: calc(1 * (var(--char-total) - var(--char-index)));
}
}
}
<link href="https://unpkg.com/splitting/dist/splitting.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.