inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

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

splitting text animation

1140

dan0748

작성한 질문수 6

1

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

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

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

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

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

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

HTML/CSS 웹 디자인 반응형-웹

답변 2

1

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

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

선생님 각 강좌마다 예시로 보여주시는 웹페이지들은 어디서

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