Question

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

然而，我无法达到预期的效果，检查网站代码没有提示。很难谷歌，因为它也很难描述。我能找到最接近解决方案的是这个JSFiddle：

(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，我可以从那里弄清楚。只是难以接近这个方向。

Answer 1

这是一个很好的效果。这是一种方法。

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

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

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

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

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

Fiddle

Answer 2

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

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

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

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

3 个答案:

Fiddle