inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

초보자도 만들 수 있는 스크롤 인터렉션. 1편 자바스크립트

10-1 [실습편] 스크롤UI만들기

offsetTop와 offsetBottom의 값 질문입니다.

1094

akung98

작성한 질문수 7

0

제가 따로 홈페이지를 만들며 연습중인데

offsetTop[index] = $(obj).offset().top;

            offsetBottom[index] = $(obj).offset().top + $(obj).height(); 이렇게 입력하고 로그를 찍었는데

이렇게 찍히는 이유가 뭔가요??ㅠㅠㅠ

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

답변 6

0

깡코딩

축하드립니다 ^^

0

akung98

진짜 감사합니다.!! 해결했습니다 감사합니다!!!

0

깡코딩

안녕하세요 :)

메일 확인해봤습니다! 

개인적인 프로젝트 문제는 수업과 별개라 도와드리지 않지만 상황이 급박하신 것 같아 이번엔 특별히 도와 드리도록 하겠습니다 :D

먼저 index.html에  스크립트 섹션 변수 클레스 네임을 다음과 같이 변경해주세요 var section = $('.scroll-section');

다음 오프셋탑값과 바텀 배열의 값이 제대로 나오지 않는 이유는

섹션에 관련된 여러가지 스크립트들을 모두 처리된 후에 스크롤 UI 자바스크립트를 호출하도록 변경해야 됩니다.

예를 들자면 캔버스 이미지 시퀸스 처리 스크립트가 모두 실행된 후에 스크롤UI를 호출하도록 해보세요

코드를 변경하기전에 정상 작동하는지 테스트를 진행해보고 싶다면

현재 index.html에 파일에 있는 스크롤 UI 초기화 부분을 다음과 같이 셋타임아웃을 활용해서 테스트해보세요

    $(function(){

        init();  //스크롤 UI초기화 부분

    })

    $(function(){

        setTimeout(function(){

            init(); // 셋타임아웃을 활용해서 다른 인터렉션이 끝난후에 UI호출하도록 변경할 것 

        },5000)

    })

다음과 같이 셋타임 아웃을 활용해 5초의 텀을 줬습니다. (텀을 주면 정상 작동)

주의사항 : 캔버스 이미지 시퀀스같은 경우 네트워크 환경에 따라서 이미지 로드가 오래 걸릴 수 있습니다.

만약 네트워크 속도 문제로 이미지 로딩이 5초를 넘는다면 같은 문제가 또다시 생길수 있으니 간략한 테스트는 셋타임아웃으로 해보고 정상적으로 작동한다면 이미지 시퀀스 스크립트에서 이미지를 로딩하고 섹션에 관련된 것들을 초기화한후에 스크롤UI를 호출 하도록 변경해보시길 바라겠습니다. 

그럼 화이팅하세요 감사합니다.  :D

0

akung98

메일 보냈습니다..ㅠㅠ 확인부탁드리겠습니다 감사합니다 ㅠㅠ

0

깡코딩

코드를 보내기 어려운 상황이라면 다음과 같은 사항을 체크해보세요

1.스크롤UI 섹션의 높이값을 지정해 줬는지? 

2.섹션의 높이값을 지정하지 않고 섹션에 들어가는 이미지로 섹션의 높이값을 지정 할 경우에 $(function , document.ready가 아닌  onload를 사용해 스크롤 UI함수를 호출하세요.

0

깡코딩

안녕하세요 akung98님 :)

섹션의 위치값 배열 로그가 제대로 나오지 않아 문의주신것 같습니다.

작성한 코드를 ggangcodingqna@gmail.com으로 보내주시면

확인하며 뭐가 문제인지 알아보도록 하겠습니다 :D

감사합니다 :)

다음강의 언제나오나요 다음강의는 인터렉티브한 전체적인 웹사이트였으면 좋겠네요

0

197

1

반응형에 대해 질문이 있습니다 !

0

366

1

날짜 카운트를 활용하여 시간으로 적용해볼 수 있나요?

0

379

1

함수가 정의되기 전에 함수 호출

0

343

1

섹션12 보너스 챕터에 관한 질문입니다!

0

468

1

5-3-1 강좌 섹션 질문 합니다.

0

312

1

죄송합니다만 해당 프로젝트를 리엑트로 수정해서 만들어보고있는중에 질문드립니다.

1

463

3

화면 높이 관련 질문 있습니다.

1

433

1

선생님

0

370

1

5-2 vanilla.html 질문합니다.

0

422

1

5-3-2 질문입니다.

1

293

1

5-2 추가 질문이요

0

345

2

5-2 ! 질문이요.

0

266

1

안녕하세요!

0

272

1

질문드립니다.

1

366

2

질문드립니다.

0

1664

3

색션6강 카운트관련 문의드립니다!

0

238

1

섹션5 관련 질문드립니다.

0

261

1

setProperty 를 재활용 하고싶습니다.

0

210

1

IntersectionObserver

0

255

1

offsetheight와 scrollheight

0

398

1

완성된코드를 그대로 가져왔는데 크기가 이상해요

0

428

2

2:56에 10씩 증가시키는건 어떻게 하신건가요?

0

315

1

<script>에 $(function(){})으로 감싸준 이유

0

207

1