인프런 커뮤니티 질문&답변

안녕하세요 :)

전 질문자님(소나무님)의 질문은 애니메이트로 구동시 애니메이션의 프레임손실을 말씀하신겁니다!

- rechels 님 질문 -

rechel님 질문에서 말씀하신대로 스크롤의 위치에 따라서 액티브 클래스가 추가되고 사라지는건 맞으나 동작이 왔다 갔다 반복된다면

비디오의 높이값을 제대로 가지고 오지 못했을때 스크롤 위치값을 구하는 수식이 실행되면서 오류처럼 보일 가능성이 높습니다.

1.비디오 태그에 <video preload="auto"> 값을 넣어보시길 바라겠습니다 :)

2.해당 예제 코드에서 도큐먼트 레디 부분을 제거하시고

온로드를 사용해 호출해보세요

다음과 같이 스크롤 이벤트에서 무브섹션을 호출하는 부분과 init(); 프로그램의 시작을 알리는 부분을 온로드에서 호출하도록 변경하셔야합니다. 또한 다음과 같이 작성할 경우 다시한번 말씀드리지만 도큐먼트 레디는 삭제해주세요 :)

코드 맨 위에 있는 이부분입니다 :)  $(function(){

선생님 안녕하세요. 저도 같은 증상으로 active가 생겼다 사라졌다를 2번 반복하고 실행이 됩니다. 

혼자서 끄적이면서 완성해보려했으나 실패를 거듭하기만하고 결과가 안나와서 저도 글을 남깁니다. 이 화면이 처음 열 때는 괜찮은데 새로고침하고 해서 그럴때는 active 클래스 생기고 사라지며 버벅거리는 현상이생깁니다.

안녕하세요 수강생님 :)

부드러운 스크롤 이동을 위해 이 코드를 참조해서 작업해 보시면 좋을듯 합니다 :)

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_smooth_scroll

안녕하세요 수강생님:)

섹션5 예제에서 떨림이 생기면서 작동하지 않는다고 하셨는데요!

먼저 섹션5에서 화면의 크기 단위로 움직이는 코드는 jquery의 애니메이트로 구현되어 있습니다. 

jquery의 애니메이트는 css애니메이션보다 약간 부드러운 느낌이 적은데요 이유는 jquery애니메이션 같은 경우 css애니메이션과 리퀘스트애니메이션프레임보다 모션 프레임손실이 더 많기 때문입니다.

더 부드러운 이동을 원하시면 css를 활용해서 움직이도록 만들어야 되는데요 ! 그럴경우 하위 브라우저에서 호환되지 않는 문제가 생깁니다 :)

그렇다면 해결 방안으로는 css애니메이션과, jquery animate를 동시에 사용하는 방법이 있는데요 

두가지 애니메이션을 동시에 사용하기 위해선 두가지 애니메이션 코드를 모두 작성한 후에

강좌7에 나오는 모더나이저 활용법을 참고하셔서 해결하시면 좋을듯합니다:)

그다음 제이쿼리로 제작되어 있는데 javascript로 수정하려면 어떻게 해야 하나요? 라고 질문 주셨는데요

제이쿼리가 javascript입니다. 만약 수강생님이 jquery라는 자바스크립트 라이브러리를 사용하고 싶지 않으실 경우에는 작성된 예제코드 중간 중간있는 jquery문법을 순수 javascript로 바꿔주면 됩니다.

예를들어 제이쿼리 에서는 $('.test') 이런식으로 html요소를 셀렉트 하죠??? 이부분을 순수 자바스크립트로 고친다면 다음과 같이

document.querySelector(".test");

이런식으로 변경해주면 되는겁니다 :) 간단하죠?? 

다음 하나 더 예를 들자면 제이쿼리에서 엘리먼트에 클래스를 추가하는 문법은 다음과 같습니다.

$('.test').addClass('active');

이 부분을 순수 javascript로 사용하기 위해선

var el = document.querySelector(".test");

el.classList.add("active");

다음과 같이 변경해 주면 되는겁니다 :)

간단하죠?? 하지만 문제는 위 코드를 사용할 경우 하위 브라우저 호환성 문제가 생기기 때문에

해당 함수의 브라우저 서포트 현황을 체크하시고 사용하시길 추천드립니다 :)

그럼 또 궁금한 사항이 생긴다면 언제든 문의주세요 :)