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);
    }
}

답글 남기기

이메일 주소를 발행하지 않을 것입니다. 필수 항목은 *(으)로 표시합니다