javascript - parallax-bg

요즘 parallax를 좀 관심을 가지고있는데

뭐 종류가 워낙 많아서 ㅋㅋ 다 해볼순 없지만 

링크:http://creatijin.dothome.co.kr/project/parallax/bg/bg-parallax.html

$(document).ready(function(){
    
 
    $(window).scroll(function() {
        scollView();
    });
    
    function scollView() {
        var scolled = $(window).scrollTop();
        
        $(".section1").css("backgroundPosition", 50+"%"+" "+"-"+scolled/12+"px");
        
        $(".section2").css("backgroundPosition", 50+"%"+" "+"-"+scolled/18+"px");
        
        $(".section3").css("backgroundPosition", 50+"%"+" "+"-"+scolled/24+"px");
        
        $(".section4").css("backgroundPosition", 50+"%"+" "+"-"+scolled/30+"px");
        
        $(".section5").css("backgroundPosition", 50+"%"+" "+"-"+scolled/45+"px");
    }
 
});

포지션값을 변경해주면 저런 효과를 낼수있는데 저안에 수치를 잘 넣으면 된다.

난 대충 넣었는데 좀 뭔가 허전하지만 ㅋㅋ

그리고 css속성을 변경한거라 transition도 적용되서 시간을 살짝주면 좀 더 움직임을 줄 수 있다.