<body>
<header>
<h1 class="cutoffstart" data-text="Text with cut off">Text with cut off</h1>
</header>
</body>$background-color: #080851;
$h1-font-size: 8vw;
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap");
html,
body {
margin: 0;
padding: 0;
width: 100%;
text-rendering: optimizeLegibility;
font-kerning: normal;
background-color: $background-color;
}
header {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
max-width: 100vw;
margin: 0;
padding: 0 7vw;
background-image:url(https://raw.githubusercontent.com/andrew-sims/andrew-sims.github.io/master/images/codepen/aerial-ocean.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: top;
background-color: inherit;
background-blend-mode: soft-light;
}
h1 {
font-family: "Poppins", sans-serif;
font-size: $h1-font-size;
font-weight: 900;
line-height: 0.85;
letter-spacing: -0.02em;
text-align: center;
color: white;
text-transform: uppercase;
}
.cutoffstart {
transition: all 1s ease-in-out;
position: relative;
margin-top: 0.675;
&:before {
transition: all 700ms ease-in-out;
user-select: none;
content: attr(data-text);
display: flex;
position: absolute;
top: 0;
height: 0;
overflow: hidden;
text-transform: uppercase;
}
&:after {
transition: all 1s ease-in-out;
user-select: none;
content: attr(data-text);
display: flex;
position: absolute;
top: 0;
height: 0;
overflow: hidden;
text-transform: uppercase;
}
}
.cutoffend {
margin-top: 1.35em;
&:before {
height: calc(#{$h1-font-size} / 2.6);
top: -0.43em;
}
&:after {
height: calc(#{$h1-font-size} / 4.5);
top: -0.69em;
}
}
.stoptransitions {
transition: unset;
&:before {
transition: unset;
}
&:after {
transition: unset;
}
}setTimeout(() => {
$(".cutoffstart").addClass("cutoffend");
}, 800);
setTimeout(() => {
$(".cutoffend").addClass("stoptransitions");
}, 2000);
External CSS
This Pen doesn't use any external CSS resources.