CSS Funstuff: 애니메이션 파형

으아아아아아아아아! 나는 또 다른 CSS 튜토리얼과 (속담) 이빨을 가라앉힐 수 있는 더 재미있는 것들을 가지고 돌아왔습니다!

파형이란 무엇입니까?

파형은 파동의 any kind, as described here을 시각적으로 표현한 것입니다. 이 예에서는 파형을 어떤 종류의 실제 데이터에도 연결하지 않겠지만 충분히 모험적인 사람이라면 약간의 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;
}

사업부:

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

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

모두 애니메이션화

키프레임 만들기:

@keyframes 를 사용하여 waveform 라는 애니메이션 설명을 만듭니다.

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

이 애니메이션을 요소에 적용하면 Y 축에서 축소됩니다.

0%에서 세로 크기(높이)의 절반으로,

50%에서 세로 크기의 1.5배로,

100%에서 다시 세로 크기의 절반으로 돌아갑니다.

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

애니메이션 적용:

애니메이션을 실제로 적용하기 위해 [class*='wave'] 선언을 포함하도록 animation 규칙 세트를 수정합니다.

[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: 속성과 animation-name: , animation-duration: , animation-timing-function: 등과 같은 다른 속성에 해당하는 여러 값으로 구성됩니다.

간결함을 위해 이 기사에서 이러한 모든 내용을 다루지는 않겠지만 read the docs on MDN .

var()는 무엇입니까?

코드에 주의를 기울인 경우 animation: 선언 값에 custom property(종종 "CSS 변수"라고 함)을 포함했음을 알 수 있습니다. 위에서 작성한 모든 클래스에 대해 애니메이션을 다시 선언하지 않고도 애니메이션 속도 값( animation-duration: )을 변경할 수 있기 때문에 이는 매우 중요합니다.

변수를 선언합니다.

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() 기능에서 밀리초 수와 같은 값을 약간 가지고 놀면 다소 흥미로운 결과를 얻을 수 있습니다.

소스 코드 + 예제

you can grab에서 my gumroad page 무료로 전체 프로젝트에서 정확히 이 작업을 수행했습니다. 여기에는 <output> 요소의 파형 아래에 나열되는 애니메이션 속도를 변경할 수 있는 슬라이더 및 관련 JS 코드가 포함되어 있습니다.



이것을 시도하고 그것으로 더 많은 것을 만들면 결과를 보고 싶습니다. 댓글로 저와 공유하거나 !