Question

I’m trying to build a page where I can have 3 “layers”. 1 – background, 2 – images and 3 – images.

I already achieve that using the animate jQuery function and it works perfectly when I’m working with the navigation menu. However I’d like to have the same effect when the users scrolls the browser console/window (Internet Explorer, Chrome, Firefox…). I don’t know if I’m being clear so this is a page that I found with a similar effect: http://johanreinhold.com/

I’m searching for a while and I didn’t get it yet. How do I fix this problem?

My code for animate is

function goto(id)
{
    $('html,body').animate({scrollTop: $("#"+id).offset().top},2000);
    $('html,body').clearQueue();
}

Answer 1

I’m not entirely sure what you mean either (so my apologies to both you and @mrtsherman if his answer’s the one you want), but I think you’re asking how to get a parallax scrolling effect. The site you linked to uses MooTools

    $$("#floaters-0, #floaters-01, #floaters-02, #floaters-1, #floaters-11, #floaters-12, #floaters-2, #floaters-21, #floaters-22, #floaters-3, #floaters-31, #floaters-32").each(function(item) {
        item.store('top', parseInt(item.getStyle('top')));
        item.store('y', item.getPosition().y);
        item.store('friction', parseFloat(item.get("data-friction")));
    });

    this.addEvent('scroll', verticalParallax);

function verticalParallax(e) {

    var windowScrollY = window.getScroll().y;

    $$("#floaters-0, #floaters-01, #floaters-02, #floaters-1, #floaters-11, #floaters-12, #floaters-2, #floaters-21, #floaters-22, #floaters-3, #floaters-31, #floaters-32").each(function(item) {

        if ((windowScrollY) >= item.getPosition().y)
            item.setStyle("top", item.retrieve('top') + (windowScrollY - item.retrieve('y')) * item.retrieve('friction'));
    });
};

jQuery

I’ve moved it over to jQuery (in a rough and ready sort of way) and stuck it in a JSFiddle here http://jsfiddle.net/meloncholy/FhxZ3/1/

    $(function ()
    {
        $(".float").each(function ()
        {
            var $this = $(this);

            $this.data("startTop", $this.offset().top);
        });

        $(window).scroll(function ()
        {
            var documentScrollTop = $(document).scrollTop();

            $(".float").each(function ()
            {
                var $this = $(this);

                $this.offset({ top: $this.data("startTop") + documentScrollTop * $this.data("friction"), left: $this.offset().left });
            });
        });
    });

CSS

    .float { display: block; left: 100px; position: fixed; }

        #float-1 { top: 50px; }

        #float-2 { top: 400px; }

        #float-3 { top: 850px; }

    .content { font-size: 48px; position: relative; z-index: 2; }

The code hooks into the scroll event and adjusts the images’ positions when it triggers. The amount of scrolling is controlled with by the friction property, so setting it to 0.5 as in the example means they should move at half the rate of the text. It turns out (though I guess it’s obvious in retrospect) that it’s important to set the parallax elements to have position: fixed or you’ll get some nasty jumping.

As I said, this is a bit rough and ready (in particular other sites often only run the parallax effect in a certain vertical window), so you may want to hit Google for parallax scroll jquery or something and take a look at how someone else did this properly. 🙂