开发者

Multi-directional and Multiple image, parallax scrolling

开发者 https://www.devze.com 2023-03-18 04:10 出处:网络
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'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>
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号