inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

애플 웹사이트 인터랙션 클론!

스크롤 애니메이션 구현 3

인터랙티브웹을 공부하기 위해서

해결된 질문

374

밀크티

작성한 질문수 26

0

안녕하세요 선생님 좋은 강의 정말 잘 보고 있습니다!

공부하다보니 한가지 궁금한 점이 생겨서 질문 드립니다.

제가 수학을 그리 잘 하지 못하는데..

애플 클론 코딩을 해보니 혼자서 저렇게 값을 구하는 공식을 짜라고 하면 못할 것 같더라고요 ㅠㅠ..

선생님께서도 보통적으로 자주 쓰는 저런 공식(?)들은 알아뒀다가 복붙해서 사용하시는 건지.. 아니면 전부 직접 연산식을 만드셔서 사용하는건지 궁금합니다..ㅠ 뭔가 자신이 없어지네요

역시 수학 공부를 더 하는 것이 답이겠지만 혹시 어떻게 공부하는 것이 좋을 지 조언 해주실 수 있으신가요??

클론코딩 HTML/CSS svg 인터랙티브-웹 javascript 웹 디자인

답변 1

5

1분코딩

수학이 필요한 경우도 있기는 한데요, 애플 클론에서 사용하는 정도의 수식은 차근차근 잘 생각해보시면 결국 비율을 구할 뿐이기 때문에 그렇게 어렵지는 않으실 거예요^^ 이런 식의 코딩이 처음이라 더 어렵게 느끼시는 것 같아요.
인터랙션이 들어가는 UI를 개발할 때.. 보통 디자인이나 구현 형태가 다를 뿐, 특정 비율을 구해서 처리하는 경우가 정말 많기 때문에 몇번 해보다 보시면 자연스럽게 익숙해집니다. 간단한 수식으로도 형태만 달리하면 얼마든지 멋진 것들 많이 만들 수 있거든요!

복잡한 수식이 필요한 구현의 경우는, 구글같은 곳에 찾아보시면 여러 훌륭한 분들이 이미 올려둔 수학 식들을 찾을 수 있는데요, 우리는 그걸 자바스크립트 문법으로 변환하는 요령만 익숙해지면 되므로 너무 부담 가지실 필요는 없다고 생각돼요 :)

뭐든 그렇듯이, 처음이라 어려운 거니까 자신감 가지셔도 괜찮습니다!

이미지 배경 문의

0

82

1

[크로스브라우징] safari에서 동영상 영역 미노출

0

126

1

항상 궁금했는데 크림슨 컬러 선택하셨을때 활용했던 사이트 좀 알려주세요~

0

132

2

vue강의는안하시나요?!

0

126

1

스크롤 속도에 따른 messageA_opacity_out

0

130

1

drawImage(objs.videoImages[sequence], 0, 0); error

0

95

1

선생님 캔버스 width 크기는 이미지 크기에맞게 해줘야하나요?

0

139

0

선생님 안녕하세요. 혹시 메인개발(?)분야가 뭔지 궁금합니다.

0

220

1

React에서 load 상태를 어떻게 감지할 수 있을까요?

0

699

1

[섹션7-3: 버그수정 2] tempYOffset 오류

0

211

1

스크롤할 때 캔버스로 하신 이유가 있으신가요? 그냥 성능 떄문에 캔버스로 하신건가요?

0

331

2

게속 오류떠서 글 작성해봐요....

0

533

2

Vanilla JavaScript로 SPA 만드는 자료 혹은 선택 기준을 추천해주실 수 있으신가요?

1

500

1

특정 타이밍 스크롤 애니메이션 적용하기 섹션 수강중입니다.

0

466

2

[#svg, #이미지프레임과 텍스트 싱크] 스크롤 값에 움직이는 svg path, 이미지프레임과 텍스트 싱크 맞추는 것, 2가지 질문이 있습니다.

0

461

2

페이지가 처음 로딩 되었을 때 애니메이션 처리가 되지 않는 느낌입니다

0

444

1

섹션2 번째, opacity=0 되지 않고 잔상이 남습니다.

0

541

1

원래 쿼리셀렉터에서는 띄워쓰기 하면안되나요?

0

607

2

라이브러리 질문

1

423

2

translateY대신 애플에서 사용한 것 처럼 matrix로 scale의 크기를 주려고 하는데

0

417

1

[스크롤 높이 세팅] scrollHeight값이 3990아닌 4645로만 나오는데 뭐가 문제일까요? ㅠㅠ

0

609

2

scrollLoop 함수 질문

0

486

2

도메인 웹호스팅시 이미지가 안 뜨는데 누가 좀 알려주세요ㅠㅜ

0

1243

2

load 이벤트시 첫 비디오 이미지가 뜨네요.

0

514

2