如何创建重叠的图像，在滚动时显示自己

我想要创建类似于此处所示的滚动效果： http：//www.seaham -hall.co.uk/

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

但是，我无法实现所需的效果，并且检查网站代码给我没有提示。很难google，因为它也很难描述。最近我可以找到一个解决方案是这个JSFiddle：

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);

但我不知道这是否正确的方向，图片，但在Seaham Hall网站上注意到图片根本不会向上移动，它们是固定的，并在您滚动时显示。

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.

如何重新创建这个效果？我最初的想法是让第一个图像缩小，从1000px下降到0px，第二个图像增长到1000px，并继续滚动这个图像，然后收缩，第三个增长，等等。然而，这意味着在第一个图像之后，所有其他图像的起始大小为0px，从技术上讲，在页面上没有滚动开始，所以这是一个问题。

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.

如果任何人可以指向我的教程或JSFiddle有一个基本的概念，我可能会想出来从那里。只是骗了什么方向来接近这个。

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.