스크롤 반응 박스

저번에 포스팅 한거같은데..아닌가보다. 못찾겠다😋

요즘 웹사이트를 보면 스크롤에 따라 이벤트로 애니메이션을 준 것을 많이 볼 수있다.

예를 들면 LG그룹 홈페이지나, 스타벅스만 봐도 알 수 있다.

 

아래는 자바스크립트 코드다 :D

/*스크롤에 반응하는 박스*/ 
$("#page .page_event_box").each(function(){ 

  var box_offset=$(this).offset(); 
  var box_top=box_offset.top; 

  //if(window_scroll_top+window_height-50>box_top){$(this).addClass("active");}
  if(window_scroll_top<=box_top&&window_scroll_top+window_height>=box_top){$(this).addClass("active");} 
  //else $(this).removeClass("active"); 
});

 

아래 조건문을 풀면 스크롤 영역에 들어올때마다 애니메이션이 발생할것이고,

위와같이 주석처리를 해놨다면 한번만 실행이 된다.

원리는 높이를 비교해서 해당태그(page_event_box)의 스크롤 영역에 들어왔다면 클래스를 추가해주면서

css에 position속성등을 이용해 작업을 해놨다면 css애니메이션이 실행될 것이다.

이렇게 노가다를 뛰는 방법도 있고 찾아보니 라이브러리, 오픈소스등이 많은 것같다.

최근에 하나 추천을 받았는데 금새 까먹어서 못찾고있다ㅎ...

 

+) 해당 코드를 함수로 만들어놓고 처음화면에 보일때 호출되길 원하면 

document.ready나 window.onload에서 한번 실행해야 할 것이며,

물론 스크롤 이벤트에 해당 함수를 등록해놔야한다.