如何创建重叠图像，在滚动时显示它们自己答案

【问题标题】：How can I create overlapping images that reveal themselves as you scroll如何创建重叠图像，在滚动时显示它们自己
【发布时间】：2016-08-09 15:10:13
【问题描述】：

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

但是我无法达到预期的效果，并且检查网站代码没有给我任何提示。很难用谷歌搜索，因为它也很难描述。我能找到解决方案最接近的是这个 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 网站上，图像似乎根本没有向上移动，它们是静止的并变成滚动显示。

如何重现这种效果？我最初的想法是让第一个图像在你从 1000px 向下滚动到 0px 时缩小，第二个图像增长到 1000px，当你继续滚动这个图像然后缩小，第三个增长，依此类推。然而，这意味着在第一张图片之后，所有其他图片的起始尺寸都是 0px，从技术上讲，页面上一开始就不会滚动，所以这是一个问题。

我的第二个想法是，也许第二个图像固定在页面上，当您滚动时，第一个图像向上滑动显示第二个图像，第二个图像似乎不会移动。一旦第一张图片离开页面顶部，第二张图片就会从页面上分离出来，并允许随着滚动向上移动，而第三张图片会在第二张图片向上移动时附加并显示出来，这将给出在Seaham 网站，但我不知道这是正确的答案。

如果有人可以向我指出教程或具有基本概念的 JSFiddle，我可能会从那里弄清楚。只是难倒了从什么方向着手。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

效果不错。这是一种方法。

将每张图片放在一个固定的位置div，它占据了整个视口（最初）并有overflow:hidden。

将每个div 的z-index 设置为高于下一个div。

当窗口滚动时，将divs 的高度调整为窗口高度乘以 DOM 在 DOM 中的位置（索引）减去窗口的 scrollTop 的函数：

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

其他内容需要比图像divs 更高的 z-index。请注意，z-index 仅适用于定位元素。

Fiddle

【讨论】：

这看起来很棒，也很简单。跨浏览器兼容性如何？你知道他们是如何让带有文本的小 div 移动并与它们各自的图像一起出现的吗？迫不及待想明天试试这个。
这适用于 Chrome、IE、Firefox、Opera 和 Safari。我已经更新了我的答案并在我的小提琴中添加了一些文字。
像魅力一样工作！谢谢
太棒了。我不知道他们是如何在您链接到的 seaham 网站上做到这一点的，但这是一个有趣的挑战。
我不认为这是完全相同的方法，但据我所知，它产生的结果几乎相同。我做了一些更改，主要是在 javascript 中使用 screen.height 而不是 $(window).height() 在某些情况下获得更好的结果，但是您提供的基本代码让我踏上了第一步。

【解决方案2】：

从技术上讲，您想要的效果不是 parallax 背景，但它足够接近视差 jQuery 框架应该适合您。

我建议您研究 jQuery Parallax 插件，因为它们可能会提供您想要的功能，而无需进行太多自定义工作。当然，由于您正在处理大图像，因此最好注意资源管理；一个好的插件应该相当有效，但其他插件可能会很慢或资源密集。

【讨论】：

【解决方案3】：

查看这个 jquery 插件：ScrollMagic

用法： taken from github

基本的 ScrollMagic 设计模式是一个控制器，它附加了几个场景。每个场景都有明确的开始和结束位置，并定义了当容器滚动到特定偏移量时会发生什么。

/*
    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
]);

【讨论】：