CSS Funstuff: 애니메이션 파형

반응형

우와! 우와우와우와우와우와우와우와! 저는 또 다른 CSS 튜토리얼과 여러분이 이를 빠트릴 수 있는 더 재미있는 것들을 가지고 돌아왔습니다!

파형이란?

파형은 여기서 설명한 바와 같이 모든 종류의 파동을 시각적으로 표현한 것입니다. 이 예에서는 파형을 실제 데이터에 연결하지 않지만 모험적인 사용자라면 약간의 JavaScript를 사용하여 이러한 작업을 수행할 수 있습니다!

최종 결과 스크린샷:

 

참고: 문서 하단에 이 프로젝트의 전체 소스 코드를 공유하지만 이 문서에서는 반드시 필요한 항목만 설명합니다.

기본을 다지기

HTML 코드:

먼저, 우리는 섹션으로 마무리된 7개의 div가 필요합니다. 각각은 고유한 클래스로:

 

<section>
      <div class="wave0">
            </div>
    <div class="wave1">
          </div>
    <div class="wave2">
          </div>
    <div class="wave3">
          </div>
    <div class="wave4">
          </div>
    <div class="wave5">
          </div>
    <div class="wave6">
          </div>
</section>

수업을 원하는 대로 불러도 되지만, 저는 일을 쉽게 하기 위해 "wave0"에서 "wave6"로 바꿨어요.

CSS 코드:

flexbox가 레이아웃을 처리할 수 있도록 하고 "와일드카드" 선택기를 사용하여 중복된 선택기나 규칙 집합을 작성할 필요 없이 모든 클래스를 스타일링합니다.

섹션:

 

section {
    display: flex;
    gap: 15px;
    margin-top: 5vw;
}

divs:

[class*='wave'] {
    aspect-ratio: .125/1;
    background-color: white;
    border-radius: 15px;
    width: .5vw;
}

이렇게 하면 다음과 같은 결과가 나옵니다(물론 제목 제외).

 

모두 애니메이션화

키 프레임 만들기:

@keyframe, 명명된 파형을 사용하여 애니메이션 설명을 생성합니다.

@keyframes waveform {
    0% {
          transform: scaleY(.5);
    }
    50% {
          transform: scaleY(1.5);
    }
    100% {
          transform: scaleY(.5);
    }
}

요소에 적용할 때 이 애니메이션은 Y축에서 축소됩니다.

 

• 0%에서 수직 크기(높이)의 절반까지,
• 수직 크기의 50%에서 1.5배까지
• 수직 크기의 절반으로 다시 돌아왔습니다.

참고: 90도 회전을 적용하면 Y축이 요소의 수평 크기에 해당합니다. 이것은 더 복잡한 애니메이션을 할 때 기억해야 할 중요한 사항입니다.

애니메이션 적용:

애니메이션을 실제로 적용하기 위해 [class*=wave] 규칙 집합을 수정하여 애니메이션 선언을 포함하도록 하겠습니다.

[class*='wave'] {
    aspect-ratio: .125/1;
    /*This can all be written on one line:*/
    animation: waveform var(--wavefreq)
               ease-in-out infinite
                            forwards;
    background-color: white;
    border-radius: 15px;
    width: .5vw;
}

 

이것은 속성 애니메이션:과 animation-name:, animation-duration:, animation-timing-function: 등과 같은 다른 속성에 해당하는 여러 값으로 구성됩니다.

간결함을 위해 이 기사에서 모두 다루지는 않겠지만, MDN에서 문서를 읽어보시면 됩니다.

그 술은 뭐야?

코드에 주의를 기울였다면 애니메이션에 사용자 지정 속성(종종 "CSS 변수"라고 함)을 포함했다는 것을 알 수 있습니다: 선언의 값. 따라서 위에서 작성한 모든 클래스에 대해 애니메이션을 다시 지정할 필요 없이 애니메이션 속도(애니메이션 지속 시간:)의 값을 변경할 수 있습니다.

변수를 선언합니다.

 

다음 코드 조각을 CSS 파일 상단에 포함하십시오.

:root {
    --m: 17.5;
    --wavefreq: calc(100ms * var(--m));
}

브라우저에 상수 역할을 하는 --m과 calc() 함수를 사용하여 애니메이션의 타이밍을 계산하는 --wavefreq의 두 가지 사용자 지정 속성을 생성하도록 지시합니다.

마지막으로, 각 수업의 타이밍을 따로 맞춥니다.

이 부분은 약간의 반복을 요구하기 때문에, 복제를 지원하는 텍스트 편집기를 사용한다면 그것을 잘 사용하는 것이 좋을 것이다. 또는 이 조각을 복사하여 붙여넣을 수도 있습니다.

 

.wave1 {
    --wavefreq: calc(200ms * var(--m));
}

.wave2 {
    --wavefreq: calc(300ms * var(--m));
}

.wave3 {
    --wavefreq: calc(400ms * var(--m));
}

.wave4 {
    --wavefreq: calc(500ms * var(--m));
}

.wave5 {
    --wavefreq: calc(600ms * var(--m));
}

.wave6 {
    --wavefreq: calc(700ms * var(--m));
}

결과 + 추가 사항:

이 코드를 사용하면 다음과 같은 결과를 얻을 수 있습니다.

"상수", --m 또는 각 파동의 calc() 함수의 밀리초 수와 같은 값을 조금만 가지고 놀면 흥미로운 결과를 얻을 수 있습니다.

소스 코드 + 예제

 

제 껌로드 페이지에서 무료로 얻을 수 있는 전체 프로젝트에서 정확히 이 작업을 수행했습니다. 여기에는 슬라이더와 애니메이션 속도를 변경할 수 있는 관련 JS 코드가 포함되어 있으며, 이 코드는 파형 아래에 <출력> 요소로 나열되어 있습니다.

여러분들도 한번 써보시고 더 쌓아보시면 결과 보고 싶으니까 댓글로 공유해주시거나 트위터 태그 해주시고요.