How can I create overlapping images that reveal themselves as you scroll

Question

I am looking to create a scrolling effect similar to that shown here: http://www.seaham-hall.co.uk/

However I am unable to achieve the desired effect, and inspecting the sites code gives me no hints. Quite difficult to google for as it is also quite difficult to describe. The closest I can get to finding a solution is this JSFiddle:

http://jsfiddle.net/xtyus/1/

(function($){
    /* Store the original positions */
    var d1 = $('.one');
    var d1orgtop = d1.position().top;
    var d2 = $('.two');
    var d2orgtop = d2.position().top;
    var d3 = $('.three');
    var d3orgtop = d3.position().top;
    var d4 = $('.four');
    var d4orgtop = d4.position().top;

    /* respond to the scroll event */
    $(window).scroll(function(){
        /* get the current scroll position */
        var st = $(window).scrollTop();

        /* change classes based on section positions */
        if (st >= d1orgtop) {
            d1.addClass('latched');
        } else {
            d1.removeClass('latched');
        }
        if (st >= d2orgtop) {
            d2.addClass('latched');
        } else {
            d2.removeClass('latched');
        }
        if (st >= d3orgtop) {
            d3.addClass('latched');
        } else {
            d3.removeClass('latched');
        }
        if (st >= d4orgtop) {
            d4.addClass('latched');
        } else {
            d4.removeClass('latched');
        }
    });

})(window.jQuery);

However I am not sure that is going in the right direction, this pulls images up and covers the previous image, but notice on the Seaham Hall site the images don't appear to move up at all, they are stationary and become revealed as you scroll.

How do I recreate this effect? My initial thought was to have the first image shrink as you scroll from 1000px down to 0px, and the second image grow to 1000px, and as you continue to scroll this image then shrinks and the third grows, and so on. However this means that after the first image all the other images have a starting size of 0px and there would technically be no scrolling on the page to begin with, so that is an issue.

My second thought is that perhaps the second image is fixed to the page, the first image slides up revealing the second as you scroll, the second image would not appear to move. Once the first image has gone off the top of the page the second image is detached from the page and allowed to move up with scrolling, while the third image is attached and revealed as the second moves up, this would give the exact effect seen in the Seaham website but I have no clue of it is the correct answer.

If anyone can point me to tutorials or a JSFiddle with a basic concept I can probably figure it out from there. Just stumped what direction to approach this from.

Answer 1

That's a nice effect. Here's one way to do it.

Put each image in a fixed position div, which takes up the entire viewport (initially) and has overflow:hidden.

Set each div's z-index to be higher than the next div's.

As the window scrolls, adjust the height of the divs as a function of the window height times the div's position (index) in the DOM, minus the window's scrollTop:

$(window).scroll(function() {
  $('.D').each(function(index) {
    $(this).css({
      height: $(window).height()*(index+1) - $(window).scrollTop()
    });
  });
});

Additional content will need a higher z-index than the image divs. And note that z-index works with positioned elements only.

Fiddle

Answer 2

Your desired effect isn't technically a parallax background, but it's close enough that parallax jQuery frameworks should work for you.

I would suggest you research jQuery Parallax plugins as they'll likely provide the functionality you'd like without much custom work. Of course since you're dealing with large images it's also best to keep an eye on the resource management; a good plugin should be fairly efficient but others may be slow or resource intensive.

Answer 3

Check this jquery plugin:ScrollMagic

usage: taken from github

The basic ScrollMagic design pattern is one controller, which has several scenes attached. Each scene has a definite start and end position and defines what happens when the container is scrolled to the specific offset.

/*
    Basic workflow example
*/

// init controller
var controller = new ScrollMagic();

// assign handler "scene" and add it to controller
var scene = new ScrollScene({duration: 100})
            .setPin("#my-sticky-element") // pins the element for a scroll distance of 100px
            .addTo(controller); // add scene to controller

// adding multiple scenes at once
var scene2 = new ScrollScene();
var scene3;
controller.addScene([
    scene2,
    scene3 = new ScrollScene({duration: 200}), // add scene and assign handler "scene2"
    new ScrollScene({offset: 20}) // add anonymous scene
]);