[JavaScript] 패럴렉스 스크롤 간단한 소스

G901 홈으로 가기

[JavaScript] 패럴렉스 스크롤 간단한 소스

5 G901

패럴렉스(Parallax) 스크롤


모니터상의 화면이 상하좌우로 스크롤 될 때, 배경 이미지 또는 오브젝트가 또다른 오브젝트들과 시간차가 발생하여 입체감 있게 보일 수 있도록 스크롤되는 기법입니다.






function parallax(){

  var scrolled = $(window).scrollTop();

   $('.bg').css('top',-(scrolled*0.5)+'px');

}

 

scrollTop() 메소드 값을 우선 가져와서 페럴렉스 효과를 넣을 오브젝트에 css를 삽입하여 scrollTop()값 대비 -50%의 움직임 차이들 만들도록 하였습니다.






787efe3af97b59386938abad8546a346_1537228310_0931.png
 

  • 페이스북으로 보내기
  • 트위터로 보내기
  • 구글플러스로 보내기
  • 카카오스토리로 보내기
  • 카카오톡으로 보내기
  • 네이버밴드로 보내기
  • 네이버로 보내기
  • 텀블러로 보내기
  • 핀터레스트로 보내기
CCL   본 자료는 크리에이티브 커먼즈 저작자표시 2.0 대한민국 라이선스에 따라 이용할 수 있습니다.