작성
·
1.1K
답변 2
1
- 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