JQuery scrolly: Стартовая позиция

Question

Я экспериментировал с параллакс-пример scrolly/JQuery & есть одна проблема, я не могу решить:

Я установил параллакса BG-imges в полноэкранный режим с «центр центра» & но, как только прокрутка начинается, они снова перемещаются. Однако прокрутка должна начинаться с исходной позиции.

Вот что я получаю: http://theuniversebyear.com/para/example/index.html

CSS

section { 
min-height: 1000px; 
position: relative; 
width: 100% !important; 
min-width: 1000px; 
margin: 0; 
padding: 0; 
overflow: hidden; 
} 
section:nth-of-type(1){background:whitesmoke;height:200px;} 
section:nth-of-type(2){background:black;height:1600px;} 

#bottle>div:nth-of-type(1){ 
background-image: url(../img/bottle.jpeg); 
background-position: center center; 
background-size: cover; 
background-repeat: no-repeat; 
background-attachment: fixed; 
margin: 0; 
height: 1200px; 
position:absolute; 
top:0;left:0; 
width:100%; 
} 
#bottle>div:nth-of-type(2) { 
background: url(../img/nike.png); 
background-position: center center; 
background-size: ; 
background-repeat: no-repeat; 
background-attachment: fixed; 
margin: 0; 
height: 1600px; 
position:absolute; 
top:0px;left:0px; 
width:100%; 
} 
#story-freext>div:nth-of-type(1) { 
background-color: red; 
margin: 0; 
height: 1600px; 
position:absolute; 
width:100%; 
top:0;left:0; 
} 
section h1{color:#4F9426;width:300px;font-size:65px;margin-bottom:14px;} 
section p{color:black;width:300px;} 
section article{ position:absolute;top:40px;left:40px;width:900px;z-index:4;} 
.parallax-item{position:absolute;z-index:5;top:40px;left:400px;} 

HTML

<section id="bottle"> 
<article>Blabla</article> 
<div class="parallax" data-velocity="-.3"></div>   
<div class="parallax" data-velocity="-.5" data-fit="525"></div> 
</section> 

<section id="story-freext"> 
<div class="parallax" data-velocity="0"></div> 
</section> 

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
<script src="../jquery.scrolly.js"></script> 
<script> 
$(document).ready(function(){ 
    $('.parallax').scrolly({bgParallax: true}); 
}); 
</script> 

Что я здесь отсутствует?

Answer 1

Вам необходимо внести поправки в два из ваших классов CSS, которые, как представляется, вызывают проблему.

Положение фона установлено неправильно, поэтому, когда параллакс JS вступает в силу, он перескакивает туда, где параллакс ожидает его начала.

#bottle>div:nth-of-type(1) { 
    background-image: url(../img/bottle.jpeg); 
    background-position: 50% 0; 
    background-size: cover; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    margin: 0; 
    height: 1200px; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
} 
#bottle>div:nth-of-type(2) { 
    background: url(../img/nike.png); 
    background-position: 50% 525px; 
    background-size: ; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    margin: 0; 
    height: 1600px; 
    position: absolute; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
}