如何创建重叠的图像，以便在滚动时显示出来

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

本文关键字：滚动 显示 图像 何创建 创建 重叠      更新时间：2023-09-26

我希望创建一个类似于此处所示的滚动效果：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，我可能会从那里弄清楚。只是难倒了从哪个方向接近这个。

这是一个很好的效果。 这里有一种方法可以做到这一点。

将每个图像放在固定位置div，它占据了整个视口(最初(并具有overflow:hidden。

将每个div的 z 指数设置为高于下一个div。

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

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

其他内容需要比图像div s 更高的 z 指数。 请注意，z 索引仅适用于定位元素。

小提琴

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

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

检查这个jquery插件：ScrollMagic

用法：取自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
]);
相关文章：