인프런 커뮤니티 질문&답변

dan0748님의 프로필 이미지

작성한 질문수

실전! 웹사이트제작! Step by Step! (대방산업_InteractiveWeb)

visual 영역 제작_(이미지 슬라이더 이미지 마스크 애니메이션과 텍스트 애니메이션)

splitting text animation

작성

·

1.1K

1

설명 해주실 때 설명이 너무 빈약한거 같아요ㅠㅠ

calc(60ms * var(--char-index));  이 부분에서 

var는 css에서 무엇인지  (--char-index) 얘는 또 무엇인지 

대충 이런거다 말씀해주셨는데 정확히 이해가 안되니까

설명을 듣고 또 구글에 검색해야되는게 불편하네요ㅠㅠ 

저것들 하나 하나가 정확하게 어떤것들인 댓글로 설명 부탁드립니다ㅠㅠ

답변 2

1

J.영님의 프로필 이미지
J.영
지식공유자

dan0748님 안녕하세요? 
제가 지방에 다녀오느라 이제서야 답을 드리네요...죄송합니다.

질문에 대한 답을 드리자면..

- ms는 (millisecond)를 뜻하며, 60ms는 0.06초로 이며,
- calc()는 괄호 안의 식을 계산한 결과를 속성값으로 사용하게 해주는 함수입니다.
- var는 값을 담을 수 있는 비어있는 그릇입니다.
- index는 배열객체의 순서입니다.(0,1,2,3,...순으로 시작)

- calc(60ms * var(--char-index));}를 보자면

calc()의 괄호안에 식을 계산한 결과값을 사용하게 해 주는 함수로,
.char클래스안에 있는 각 index(span으로 묶은 각각 영어스펠링이 인덱스가 되는데요... 가령 IMAGINE이란 단어를 보자면  첫번째 'I' 0번 인덱스, 두번째 'M' 1번인덱스, 세번째 A'가 2번 인덱스...가 됩니다)가 변수var에 대입이되어서 곱하기 0.06초씩 각 글자들이 베지어곡선 cubic-bezier(.5, 0, .5, 1)에 맞게 아래서 위로 올라오는 애니로 생각하심 됩니다.

한번 60ms를 0.06s로 작성하셔도 테스트 해보셔도 좋을 듯합니다.
이렇게 설명드림 이해가 되실련지요....ㅜ.ㅜ

영상 촬영 때 좀 더 상세하게 설명 드렸어야하는데 미처 하지 못한점 죄송하게 생각합니다.
또 공부하시다 궁금하신 점 있으시면...글 남겨주시고,
남은 저녁시간도 편안한 시간되세요^^

J.young드림^^

0

dan0748님의 프로필 이미지
dan0748
질문자

아 아닙니다~! 자세한 답변 너무 감사드립니다:D 

dan0748님의 프로필 이미지

작성한 질문수

질문하기