inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

쉽고 빠르게 만드는 다양한 이미지 이펙트!

기본 이펙트 만들기1

delaySpeed 부분 질문이요....

270

dpwl322

작성한 질문수 10

0

var delaySpeed = ((columns - j) - (i*0.5)) * 0.25;

이 부분 코드가 어떤식으로 왜 이렇게 계산식이 쓰여진지 모르겠어요....ㅠ

jquery javascript 인터랙티브-웹 HTML/CSS

답변 1

0

깡코딩

안녕하세요 :)

해당 부분에 대해 이해도를 높이려면 2중 포문에 대한 이해도가 있어야됩니다 :)

포털사이트에 2중포문에 대해 검색해 보시면 다양한 예제와 설명이 나와있으니 참고 공부해보세요!

2중 포문에 대한 이해도가 생기고 코드를 다시보면

var row = 4;

var columns = 8;

var delaySpeed = ((columns - j) - (i*0.5)) * 0.25;

컬럼스 즉 열인8에서 1씩 증가하는 j를 빼주고 다음 행의 i를 이용해값을 구해 최종 값을 구하면 

행마다 점점 줄어드는 값을 구할 수 있습니다.

해당 수식은 이해를 해야되는 과정이기 때문에 설명보다는 2중포문에 대해 완벽하게 이해하고 로그를 찍으며 코드를 본다면 쉽게 파악 할 수 있을겁니다.

한가지 팁을 드리면 예제코드에 2중 포문에서 행을 구현하는 첫번째 포문이 끝날때 로그를 찍어보세요

console.log(i+'행 end ');

다음과 같이 말이죠!

그럼 다음과 같은 결과를 확인할 수 있고

 

이미지를 보면 행이 끝날때 마다 점차 딜레이 값이 계단식으로 변경되는 것을 알 수 있습니다 :)

Part 4에서 강의 연관 노션 정보들이 워드파일에 없습니다.

0

8

2

첨부자료 Part 4 코드 확인 부탁드리겠습니다.

0

7

2

프론트엔드 학습 수준 문의

0

21

2

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

0

13

1

퍼플렉시티 최소 결제단위 50달러로 바뀐 것 같습니다.

0

34

2

리액트 챕터별 코드에서 eslint 설정파일이 없어요

0

38

2

claude plugin 방법 자세히 부탁드려요

0

38

2

강의에 적용한 스크립트를 받아 볼수 있을까요?

0

32

2

최근 코테, 과제 테스트 트렌드

0

51

2

노션 25 인터렉션 구현 파트 안 보입니다!

0

34

2

lucide react 아이콘 설치

0

35

2

파트3 13F부분도 짤린거같은데 확인해주세요

0

36

2

17강 zustand store 서버에서 생성

1

30

1

Gemini로 진행가능 여부 궁금합니다.

0

56

2

뉴스페이퍼 싱글템플릿 디자인 관련 상담 요청

0

24

2

프롬프트 11 진행 완료

0

40

2

파트3 수급 부분

0

38

2

claude cowork에서 작업하는거와 차이는?

0

33

2

문의관련 문의

0

36

2

next.js 를 2대이상 실행하는 경우 제공하는 cache 기능들은 어떻게 되나요?

0

46

2

76. 전문성 더하기: 놓치면 아쉬운 관련 기술들 수업 자료가 없어요.

0

41

2

swiper-slide 적용관련 친절한 설명 감사드립니다. 근대 첫장만 되고 다음장부터

0

267

2

질문요!

0

206

1

기본 이팩트만들기1 강좌에서 적용이안되요

0

297

1