스크롤 애니메이션

자바스크립트로 스크롤시 변하는 애니메이션을 만들 수 있다.

기본적인 UI는 navbar을 만들어 놓고 css로 class를 미리 만들고 스크롤시 미리 만들어놓은 클래스를 부착하는 식으로 만들 수 있다. 

$(window).on('scroll',function(){
  $('.nav-menu').addClass('nav-black');
});

$(window)라는 우리가 보는 화면을 scroll이라는 이벤트로 조정할 수 있다. 셀렉터에 미리 만들어놓은 nav-black이라는 클래스를 스크롤을 내리면 붙여주세요 할 수 있다.

어느정도 스크롤을 내리면 뭐하게 해주세요를 원할 수 있다.

이럴땐 먼저, 스크롤 높이를 측정해야 한다. 

$(window).scrollTop()

이렇게 써주면 스크롤이 위에서부터 얼마나 내려갔는지 알 수 있다.

$(window).on('scroll',function(){
  if ( $(window).scrollTop() > 100 ) {
    $('.nav-menu').addClass('nav-black');
  }
});

 

scrollTop으로 알아낸 높이를 이용하면 위처럼 스크롤이 100보다 더 내려가면 클래스를 부착해주세요 라고도 할 수 있다.

그리고 

window.scrollTo();

함수를 이용하면 해당 스크롤로 이동도 가능하다.

 

그리고 css에 transition 속성을 붙이면 자연스럽게 애니메이션처럼 변화를 줄 수 있다.