jQuery Parallax help - multiple objects

[nano]

Hey Guys,

 

I am building a parallax website where different elements move on scroll. It's different to the traditional 'changing background position' style, as there are multiple individual elements that I want to move.

 

Here is what I have so far:

 

var parallax = {
init: function(){
	parallax.scroll('.cc',0.95);
},
scroll: function(el,speed){
	var $window = $(window);
	$(el).each(function(){
		var $this=$(this),top=$this.position().top,offset=$this.offset().top;
		$window.bind('scroll', function() {
			var scrollTop=$window.scrollTop();
                if ((scrollTop + $window.height()) >= (offset) && ((offset + $this.height()) > scrollTop)) { // el is in-view	
				pos = ;// how to set 'pos' variable?!
				$this.css({"top": pos}); // set new position
                }
            });
        });
}
};
$(document).ready(parallax.init());

 

The issue I am having is I can't come up with the logic required to work out the 'pos' variable, the new position.

 

My head now hurts trying to work it out so if anyone has any ideas, they would be greatly appreciated!

 

Cheers

[ignace]

Try this:

 

var $cc = $('.cc');
$(window).scroll(function() {
    var yScrollOffset = window.pageYOffset;
    $cc.each(function() {
        var $this = $(this);
        $this.css({top:$this.position().top + yScrollOffset});
    });
});