mrgreen: jquery/scrolly: start position

SELF-Forum

jquery/scrolly: start position

mrgreen
– Informationen zu den Bewertungsregeln

I was experimenting with the parallax-example of scrolly/jquery & have one problem, I can't solve:

I set the parallax bg-imges to fullscreen with 'center center' & cover, but as soon as scrolling starts, they're repositioned.Scrolling should start on the original position though. What am I missing here?

Thanks for your help!

Here's what I get: 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

<body>
<section id="bottle">
    <article>
    <h1>Blabla</h1>   
    </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>
</body></html>
Beitrag melden
–
Informationen zu den Bewertungsregeln