[Jquery] 패럴랙스

보통 백그라운드 이미지를 고정시키고 싶을때 사용하는 CSS는 아래와 같습니다.

background-image: url('w3css.gif');

background-repeat: no-repeat;
background-attachment: fixed;

그런데 뒤에 고정된 백그라운드가 마우스 드래그할떄 미묘하게 움직이고 싶다면 별도의 플러그인이 필요합니다.

그럴때 사용하기 유용한 플러그인입니다.

jQuery-Parallax-master.zip

사용방법은 간단합니다.

아래와 같이 제이쿼리 및 플러그인을 추가하고난뒤 제이쿼리로 선택자를 선택한뒤 원하는 값을 주면 됩니다.

자세한건 첨부파일 index.html 파일과 css를 열어서 확인하면 좋을꺼 같습니다.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>

<script type="text/javascript" src="scripts/jquery.parallax-1.1.3.js"></script>

<script type="text/javascript" src="scripts/jquery.localscroll-1.2.7-min.js"></script>

<script>

$(document).ready(function(){

$('#intro').parallax("50%", 0.1);

$('#second').parallax("50%", 0.1);

$('.bg').parallax("50%", 0.4);

$('#third').parallax("50%", 0.3);

});

</script>

플러그인을 사용하는 방법도 있지만 제가 직접 작성한 부분도 있습니다.

해당 부분을 보고 싶으시면 아래 링크를 눌러주세요~~

고정된 배경을 페럴랙스 하는 방법

감사합니다.