[애니메이션 페이지 만들기_3]CSS에도 변수를 쓸 수 있다!

 

애니메이션을 만들면서 알게된 것인데, 생각보다 엄청 충격이었다.

지금까지 html과 css는 모두 특정 속성을 가지고 정적으로만 사용했기때문에 변수에 어떤 값을 담거나 계산하는과정이 있을 것이라 생각을 못했었는데 그게 아니라고 한다. 변수도 쓸 수 있고, 계산도 할 수 있다.

쌩으로 알아낸 것은 아니고 참고 사이트에서 코드를 분석하다가 이효과는 어떻게 만들어진건지 알아보면서 알게된 것 인데

상당히 신선하고 충격적이었다. 역시... 내가 모르는 것은 참 방대한것같다 ㅜ

해당 문법들을 여기다 정리하고 내가짠 코드를 복기해보면서 애니메이션 페이지는 마무리 지을까 한다.

 

 

[1] 변수 선언

1) 기본 선언 방법

• 사용자 지정 속성은 두개의 붙임표로 시작하는 속성의 이름과 함께, 유효한 css 값이라면 아무거나 그 값을 선언할수있다.

  element{
  --variable-name: value;
  }

• 전역 변수 선언

  :root {
    --variable-name: value;
  
    ex)
    --main-bg-color: brown;
  }

2) 사용 방법

• var() 함수 표현사용하여 유효 값들을 찾을 수 있다. (기본)

.three {
  background-color: var(--my-var, var(--my-background, pink)); 
  /* my-var와 --my-background가 정의되지 않았을 경우 pink로 표시된다 */
}

• 유효한 값이 아닐 경우는 해당 속성에 적용되지 않는다.

:root { --text-color: 16px; } 
p { color: blue; } 
p { color: var(--text-color); } /*var(--text-color)는 16px로 color에 유효한 값이 아니므로 적용되지 않는다 */

• JavaScript에서 사용

// 인라인 스타일에서 변수 얻기
element.style.getPropertyValue("--my-var");

// 어느 곳에서나 변수 얻기 
getComputedStyle(element).getPropertyValue("--my-var");

// 인라인 스타일에 변수 설정하기
element.style.setProperty("--my-var", jsVar + 4);

 

 

 

---

 

[2] 내가 만든 애니메이션

 

앞서 정리한 내용들을 사용해서 애니메이션을 만들었다.

1) 글자 하나하나에 변수 값을 준다.

<span class="char" data-char="B" style="--char-index:0;">빈</span>
<span class="char" data-char="r" style="--char-index:1;">대</span>
<span class="char" data-char="e" style="--char-index:2;">떡</span>
<span class="char" data-char="a" style="--char-index:3;">신</span>
<span class="char" data-char="t" style="--char-index:4;">사</span>

 

2) 각각 글자에 delay값을 준 뒤 애니메이션을 동작시키면 글자가 시간에 맞게 움직인다.

h1 .char{
    --delay: calc((var(--char-index) + 1) * 200ms);
    animation: breathe 1000ms infinite both;
    animation-delay: var(--delay);
}

 

3) 애니메이션 정의

@keyframes breathe {
    60% {
        font-variation-settings: 'YEAR' 2020  , 'TEMP' 0;
        font-size: 10vw;
    }

    100% {
        font-variation-settings: 'YEAR' 2020  , 'TEMP' 1000;
        font-size: 10vw;
    }
}

 

4) 결과

• 위에 코드 실행한 애니메이션

• 완성된 애니메이션

www.youtube.com/watch?v=eoxpa_c9txY&feature=youtu.be

 

 

 

 

< 참고 >

https://developer.mozilla.org/ko/docs/Web/CSS/Using_CSS_custom_properties

사용자 지정 CSS 속성 사용하기 (변수)

https://www.codingfactory.net/11017

CSS / 변수 사용하기