I'm creating a website which is set-out on a "table top" design, in other words a single page with div pages spread-out throughout 开发者_开发技巧the page.
I am using scrollTo for the navigation, and during the animation of the navigation I want images above the background to be doing parallax scrolling to help the feeling of depth and movement.
I have used many plug-in's at this point and have found none which would offer what I am looking for, all of the images are going to have starting positions in various areas of the page and different speeds and therefore I need to be able to have a set position on page load. There is likely going to be a large(ish) amount of images which need to do this.
I have been on this for far to long and I now must use you GENIUSES OF THE INTERNET to save me!
parallax scrolling is fairly simple, no real need for a plugin, though you can easily attach this to $.fn
to make it a jQuery plugin:
<img src="foo.jpg" id="parallax1" class="parallax">
<style>
.parallax {
position : fixed;
top : 0px;
left : 0px;
}
</style>
<script>
var scroller = $('#parallax1');
$(window).bind('scroll', function(){
var top = this.scrollTop;
$('#parallax1').css('top', top * someMultiplier);
});
</script>
精彩评论