stellar.js로 어떻게 시차 배경을 얻습니까?

나는 현재이를 복제하여 stellar.js 쿼리 플러그인 시차 배경을 구현하기 위해 노력하고있어 : http://markdalgleish.com/projects/stellar.js/demos/backgrounds.html stellar.js로 어떻게 시차 배경을 얻습니까?

별의 기능 아무것도를 호출하지 변경할 것으로 보인다.

이것은 제 시도입니까, 내가 잘못 가고있는 아이디어입니까?
http://jsfiddle.net/4eBDE/55/

HTML :

<body> 
     <h1><a href="../">Stellar.js</a> Backgrounds Demo</h1> 
     <div class="photo summer" data-stellar-background-ratio="0.5"><span>Summer</span></div> 
     <div class="photo autumn" data-stellar-background-ratio="0.5"><span>Autumn</span></div> 
     <div class="photo winter" data-stellar-background-ratio="0.5"><span>Winter</span></div> 
     <div class="photo spring" data-stellar-background-ratio="0.5"><span>Spring</span></div> 
     <div class="photo summer" data-stellar-background-ratio="0.5"><span>Summer</span></div> 
     <div class="photo autumn" data-stellar-background-ratio="0.5"><span>Autumn</span></div> 
     <div class="photo winter" data-stellar-background-ratio="0.5"><span>Winter</span></div> 
     <div class="photo spring" data-stellar-background-ratio="0.5"><span>Spring</span></div> 
</body

CSS :

* { 
    margin: 0; 
    padding: 0; 
} 
body { 
    font-family: helvetica, arial; 
    padding-top: 40px; 
} 
h1 { 
    background-color: black; 
    color: white; 
    height: 40px; 
    font-size: 24px; 
    font-weight: normal; 
    left: 0; 
    line-height: 40px; 
    position: fixed; 
    text-align: center; 
    top: 0; 
    width: 100%; 
    z-index: 1; 
} 
h1 a { 
    border-bottom: 1px solid white; 
    color: white; 
    display: inline-block; 
    line-height: 30px; 
    text-decoration: none; 
} 
.photo { 
    background-attachment: fixed; 
    background-position: 50% 0; 
    background-repeat: no-repeat; 
    height: 450px; 
    position: relative; 
} 
.photo span { 
    bottom: 0; 
    color: white; 
    display: block; 
    left: 50%; 
    margin-left: -640px; 
    font-size: 38px; 
    padding: 10px; 
    position: absolute; 
    text-shadow: 0 2px 0 black, 0 0 10px black; 
    width: 1280px; 
} 
.summer { 
    background-image: url(http://markdalgleish.com/projects/stellar.js/demos/images/summer.jpg); 
} 
.autumn { 
    background-image: url(http://markdalgleish.com/projects/stellar.js/demos/images/autumn.jpg); 
} 
.winter { 
    background-image: url(http://markdalgleish.com/projects/stellar.js/demos/images/winter.jpg); 
} 
.spring { 
    background-image: url(http://markdalgleish.com/projects/stellar.js/demos/images/spring.jpg); 
}

자바 스크립트 :

$(function() { 
    $.stellar({ 
     horizontalScrolling: false, 
     verticalOffset: 40 
    }); 
});

출처

2013-08-21 OriginalUtter

나는 stellar.js 파일을 부가 다시, 그리고 그것을 작동합니다. 귀하의 문제는 모든 시차 속도가 동일하게 설정되어 있으므로 구별하기 어렵다는 것입니다. 나는이 바이올린의 속도의 일부를 변경, 당신은 차이를 말할 수있다 -

http://jsfiddle.net/4eBDE/72/

<div class="photo summer" data-stellar-background-ratio="2"><span>Summer</span></div> 
<div class="photo autumn" data-stellar-background-ratio="0.5"><span>Autumn</span></div>

을

출처

2013-12-04 16:52:52 Steve

stellar.js로 어떻게 시차 배경을 얻습니까?

답변

관련 문제