<h1 class="jt --debug">
<span class="jt__row">
<span class="jt__text">Jalousie</span>
</span>
<span class="jt__row jt__row--sibling" aria-hidden="true">
<span class="jt__text">Jalousie</span>
</span>
<span class="jt__row jt__row--sibling" aria-hidden="true">
<span class="jt__text">Jalousie</span>
</span>
<span class="jt__row jt__row--sibling" aria-hidden="true">
<span class="jt__text">Jalousie</span>
</span>
<span class="jt__row jt__row--sibling" aria-hidden="true">
<span class="jt__text">Jalousie</span>
</span>
<span class="jt__row jt__row--sibling" aria-hidden="true">
<span class="jt__text">Jalousie</span>
</span>
</h1>
@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');
.jt {
position: relative;
font-size: 20vmin;
font-family: 'Staatliches', sans-serif;
text-transform: uppercase;
font-display: swap;
}
.jt__row {
display: block;
}
.jt__row:nth-child(1) {
clip-path: polygon(0% 75%, 100% 75%, 100% 100%, 0% 100%);
}
.jt__row:nth-child(2) {
clip-path: polygon(0% 50%, 100% 50%, 100% 75.5%, 0% 75.5%);
}
.jt__row:nth-child(3) {
clip-path: polygon(0% 25%, 100% 25%, 100% 50.5%, 0% 50.5%);
}
.jt__row:nth-child(4) {
clip-path: polygon(0% 0%, 100% -10%, 100% 35.5%, 0% 25.5%);
}
.jt__row:nth-child(5) {
clip-path: polygon(0% -25%, 100% -45%, 100% -9.5%, 0% 0.5%);
}
.jt__row:nth-child(6) {
clip-path: polygon(0% -50%, 100% -85%, 100% -44.4%, 0% -24.5%);
}
.jt__row.jt__row--sibling {
position: absolute;
top: 0;
left: 0;
user-select: none;
}
.jt__text {
display: block;
transform-origin: bottom left;
animation: moveIn 2s cubic-bezier(.36,0,.06,1) alternate infinite;
}
.jt__row:nth-child(1) .jt__text {
transform: translateY(-0.1em);
}
.jt__row:nth-child(2) .jt__text {
transform: translateY(-0.3em) scaleY(1.1);
}
.jt__row:nth-child(3) .jt__text {
transform: translateY(-0.5em) scaleY(1.2) rotate(-1deg);
}
.jt__row:nth-child(4) .jt__text {
transform: translateY(-0.7em) scaleY(1.3) rotate(-2deg);
}
.jt__row:nth-child(5) .jt__text {
transform: translateY(-0.9em) scaleY(1.4) rotate(-3deg);
}
.jt__row:nth-child(6) .jt__text {
transform: translateY(-1.1em) scaleY(1.5) rotate(-4deg);
}
@keyframes moveIn {
80%, 100% { transform: translateY(0em)}
}
/* Add class debug on class jt for debugging */
.debug .jt__row:nth-child(even) {
color: black;
background: white;
}
.debug .jt__row:nth-child(odd) {
color: white;
background: black;
}
/* Some hygiene */
* { box-sizing: border-box }
/* Just stuff for making it pretty: */
html, body {
margin: 0;
background: #5F11E8;
color: white;
height: 100%;
}
body {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
}
// Inspired by TypeMatesFonts - https://twitter.com/TypeMatesFonts/status/1295682604646010882
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.