Parallax Sidebar Scrolling

Question

I just want to create a parallax sidebar, for example http://readwrite.com/ .

Is there a plugin for this? or Is it custom parallax just for this site?

Answer 1

After hours of experimentation and coding, I finally came up with a very exposed solution that does not rely on fixed positions (or extensive jQuery plugins), but relies solely on absolute positioning using known offsets.

Take a look at the action: http://jsfiddle.net/LntUP/

Code that does this:

$(document).ready(function() { var origTop = $('#sidebar').offset().top; var origBottom = origTop + $('#sidebar').height(); var scrollDir = 0; var scrollLast = 0; var weirdOffset = -8; $(window).scroll(function() { var scrollTop = $(window).scrollTop(); var scrollBottom = $(window).scrollTop() + $(window).height(); var curTop = $('#sidebar').offset().top; var curBottom = curTop + $('#sidebar').height(); if(scrollTop > scrollLast) { scrollDir = 1; } else if(scrollTop < scrollLast) { scrollDir = 0; } scrollLast = scrollTop; if(scrollDir == 1) { if(scrollBottom >= origBottom && scrollBottom >= curBottom) { $('#sidebar').animate({ top: scrollBottom - $('#sidebar').outerHeight() + weirdOffset }, 0); } } if(scrollDir == 0) { if(scrollTop <= origTop) { $('#sidebar').css('top', (origTop + weirdOffset) + 'px'); } else if(scrollTop <= curTop) { $('#sidebar').animate({ top: scrollTop + weirdOffset }, 0); } } }); }); 

The only thing I noticed is that for some reason I have an offset of 8 pixels, which I compensate for using the weirdOffset variable. Still a good quick solution, although a few months later;)

Answer 2

I have not seen exactly what this is doing, but there are many plugins that you could put together pretty quickly by setting them up on your page ...

Take a look at http://johnpolacek.github.com/scrollorama/ , it has features that you could build with pretty quickly.

Hope this helps.

Answer 3

If you just want to scroll through elements at different speeds, some frameworks may be full. You can bind the function to the scroll event ( $ (document) .ready (function () {}); ) and manually set the top positions by multiplying the scroll value by a predetermined coefficient.

There are several guides on how to do this here and here .

From the first tutorial, this function is called when a scroll is detected and absolutely positioned elements are moved at different speeds, which gives a sense of depth and perspective:

 function parallaxScroll(){ var scrolled = $(window).scrollTop(); $('#parallax-bg1').css('top',(0-(scrolled*.25))+'px'); $('#parallax-bg2').css('top',(0-(scrolled*.5))+'px'); $('#parallax-bg3').css('top',(0-(scrolled*.75))+'px'); } 

It might be a simpler solution :)