Responsive Font Size & Typo Animation
Responsive Font Size & Typo Animation
HTML
<div class="contents bg-primary overflow-hidden">
<div class="container d-flex justify-content-center align-items-center h-100">
<div class="section7 w-100 text-center">
<h2 class="font-h2 text-uppercase text-primary">
<span style="--Mdelay : 1">R</span><span style="--Mdelay : 2">e</span><span style="--Mdelay : 3">s</span><span style="--Mdelay : 4">p</span><span style="--Mdelay : 5">o</span><span style="--Mdelay : 6">n</span><span style="--Mdelay : 7">s</span><span style="--Mdelay : 8">i</span><span style="--Mdelay : 9">v</span><span style="--Mdelay : 10">e</span> <span style="--Mdelay : 11">F</span><span style="--Mdelay : 12">o</span><span style="--Mdelay : 13">n</span><span style="--Mdelay : 14">t</span> <span style="--Mdelay : 15">S</span><span style="--Mdelay : 16">i</span><span style="--Mdelay : 17">z</span><span style="--Mdelay : 18">e</span>
</h2>
<p class="text-light">font-size : calc(??em + ??vw);</p>
</div>
</div>
</div>
SCSS
.section7{
.font-h2{
font-family: 'Anton', sans-serif;
font-size: calc(1em + 6vw);
text-shadow: 1px 1px 0px $color-3,
2px 2px 0px darken($color-3,5%),
3px 3px 0px darken($color-3,10%),
4px 4px 0px darken($color-3,15%),
5px 5px 0px darken($color-3,20%),
6px 6px 0px darken($color-3,25%),
7px 7px 0px darken($color-3,30%),
8px 8px 0px darken($color-3,35%),
9px 9px 0px darken($color-3,40%),
10px 10px 10px $yellow;
span{
display: inline-block;
animation: ani3 4s ease-in-out infinite;
animation-delay: calc(0.3s * var(--Mdelay));
}
}
}
@keyframes ani3{
10%{
color: $white;
transform: translateY(-50px);
}
20%{
transform: translateY(0px);
}
}