splitting text animation
1140
작성한 질문수 6
설명 해주실 때 설명이 너무 빈약한거 같아요ㅠㅠ
calc(60ms * var(--char-index)); 이 부분에서
var는 css에서 무엇인지 (--char-index) 얘는 또 무엇인지
대충 이런거다 말씀해주셨는데 정확히 이해가 안되니까
설명을 듣고 또 구글에 검색해야되는게 불편하네요ㅠㅠ
저것들 하나 하나가 정확하게 어떤것들인 댓글로 설명 부탁드립니다ㅠㅠ
답변 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
9
1
슬라이드 안 find out more 버튼 위치관련
0
386
1
Splitting / 텍스트가 빠르게 올라는게 아니라 천천히 느리게 올라오게 하려면 어떻게 수정하면 될까요?
0
451
2
background image 관해서
0
347
1
slick 스크립트 추가시 적용이 안됩니다
0
298
2
반응형이 아니라서 그런지, 강사님 모니터보다 작은 랩탑으로 하니까 레이아웃이 안맞아요
0
335
1
slick을 사용하면 이미지가 슬라이드로 안되고 블록으로 밑으로 내려가요
0
227
0
제이쿼리 구문
0
295
1
slick.js 사용에 대한 질문
0
353
0
splitting js 질문 입니다
0
324
2
스크롤시 애니메이트효과
0
217
1
질문
0
243
3
스플리팅 쓰는 이유가 뭔가요????
0
292
2
하얀줄이 사진위로 올라옵니다.
0
286
2
.안녕하세요 J.영님 ! 그 전 질문을 한 중1학생입니다. 이번에 학교에서 내가 꿈꾸는 장래희망을 가진 사람과 면담하기라는 과제가 있는데 여러가지 질문을 하고 답변하는 형식으로 과제를 합니다. 혹시라도 실례가 안된다면 이메일 주소나 오픈채팅 링크를 받아볼 수 있을까요?
0
191
1
안녕하세요!
1
401
6
수강평 이벤트 당첨 관련
1
372
4
visual 클래스 높이 100%가 안됩니다.
0
188
1
다음 강좌는 언제쯤 올려주시나요?
1
268
1
메뉴를 클릭하면 메뉴 테두리가 왜 나타나는 걸까요? 궁금합니다.
0
1146
3
버튼 및 마크업문의
3
316
1
transition 질문 좀 드려요~
1
373
4
2강 CSS .gnb ul.inner.on 부분 질문 있습니다.
1
461
6
;)
1
251
1





