Parallax Scrolling working only with few sections
I'm making a Pallarax Scrolling Effect on website. If i put 3 or more
section, the effect is completely wrong... With 2 section this works
perfect. Whats the problem?
Can see th effect here: http://www.alsite.com.br/parallax
And JSFIddle here: http://jsfiddle.net/JnncN/
I Put some color on background to see the error. The image need to get
full, same like the first 2 sections.
My HTML:
<body>
<section id="home" data-speed="10" data-type="background">
<article>I am Absolute Positioned</article>
</section>
<section id="produtos" data-speed="4" data-type="background">
<article>I am Absolute Positioned</article>
</section>
<section id="empresa" data-speed="3" data-type="background">
<article>I am Absolute Positioned</article>
</section>
<section id="contato" data-speed="6" data-type="background">
<article>I am Absolute Positioned</article>
</section>
</body>
Script:
$(document).ready(function(){
$window = $(window);
$('section[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object
$(window).scroll(function() {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$bgobj.css({ backgroundPosition: coords });
}); // window scroll Ends
});
});
No comments:
Post a Comment