페럴렉스, parallax

 

view demo    download

 

 

화면상의 배경과 컨텐츠 간의 움직임에 시차를 줘서 공간감이 느껴지는것 같은 착각을 일으키는 독특하고 역동적인 패럴렉스(Parallax) 백그라운드를 만들어 보겠습니다.

 

The Javascript

 

scrollTop() 메소드로 얼마만큼 스크롤 했는지 우선 값을 알아낸 후, 그 값에 0.2를 곱하고 마이너스화 시켜서 배경이미지의 css클래스의 top에 적용시킵니다. 만약 100px만큼 스크롤 했다면 -20px만큼 배경이미지가 위로 올라갈 것입니다.

 

   
$(window).scroll(function(e){
  	parallax();
});

function parallax(){
 	var scrolled = $(window).scrollTop();
  	$('.bg').css('top',-(scrolled*0.2)+'px');
}
              

 

view demo    download