[자바스크립트] 고정된 배경을 패럴랙스 하는방법

일반적으로 CSS로 배경을 고정시키게 할땐 아래와 같이 간단하게 코드를 할수 있습니다.

<style>

.aa {

width:100%; 

height:500px; 

background-attachment:fixed; 

background-image:url('/img/01.jpg')

}

</style>

<div class='aa'></div>

하지만 뒷배경이 고정은 되지만 몬가 입체적으로 고정된거 같은 느낌은 없죠.... 

그래서 자바스크립트로 좀 추가하여 마우스를 드래그 할때 고정된 뒷배경이 같이 살짝

움직이도록 움직임을 줘보았습니다

기본인 제이쿼리를 연동한 다음 현재 스크롤의 위치를 scrolled 라는 변수에 저장하여

백그라운드 이미지가 있는 aa 라는 클래스에 백그라운드 위치값을 현재스크롤 값에서

0.4를 곱하여 미묘하게 움직이도록 했습니다. ^^

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script type="text/javascript">

$(window).scroll(function(e){

parallax();

});

function parallax(){

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

$('.aa').css('background-position-y',-(scrolled*0.4)+'px');

}

</script>