ScrollTo 및 Localscroll을 사용한 시차 배경 효과

Question

나는 이것을 알아 내려고 몇 시간 동안 둘러 보았습니다. 나는 jsfiddle처럼 구축 된 사이트를 가지고있다.

내가 사이트를 탐색 할 수 ScrollTo 및 localscroll를 사용하고 내가 섹션 래퍼에 시차 효과를 구현하고 배경을 만들 수있는 방법을 궁금해

<div id="window"> 
<div id="section-wrapper"> 
    <div id="one" class="section"><p>One</p> 
    </div> 
    <div id="two" class="section"><p>Two</p> 
    </div> 
    <div id="three" class="section"><p>Three</p> 
    </div> 
    <div id="four" class="section"><p>Four</p> 
    </div> 
    <div id="five" class="section"><p>Five</p> 
    </div> 
    <div id="six" class="section"><p>Six</p> 
    </div> 
    <div id="seven" class="section"><p>Seven</p> 
    </div> 
    <div id="eight" class="section"><p>Eight</p> 
    </div> 
    <div id="nine" class="section"><p>Nine</p> 
    </div> 
</div> 

느리게 이동합니다. 어디서나 시차 플러그인과 스크립트는 스크롤 기능을 기반으로하지만, 스크롤을 사용하여 탐색을하지 않으므로 효과를 추가하는 방법을 모릅니다.

실제 배경 이미지 만 처리 할 수있는 방법이 있습니까? 예 : .animate 및/또는 .css를 배경 위치 속성으로 사용하거나 섹션 래퍼 뒤에 요소를 넣어야합니까? 임 꽤 jquery와 자바 스크립트에 새로운 사람이 올바른 방향으로 나를 가리킬 수 있다면 나는 그것을 알아낼 수있을 것 같아요. 나는

Answer 1

이 https://github.com/markdalgleish/stellar.js/tree/master/src

지금 스크립트

<script type='text/javascript'> 
<!-- 
(function($) { 
    $(document).ready(function() { 
     $.stellar({ 
      horizontalScrolling: false, 
      verticalOffset: 40 
     }); 
    }); 
})(jQuery); 
// --> 
</script> 

을 시작하면 DIV 아래의 태그를 추가 할 필요가 사이트의 헤더이 파일을 첨부 .. 어디서부터 시작 아무 생각이 방금 한 그 배경을 감싸줍니다.

<div data-stellar-background-ratio="0.5"> 

값 0.5를 업데이트 할 수 있습니다.이 값은 배경 이미지의 속도를 정의합니다.