Javascript 仅在网站的一个分区上捕捉分区

我最近看到很多网站都在整合从一个部分到另一个部分的滚动，我试图在一个页面的一个部分上实现这一点，比如这个页面。有人知道我是如何做到的吗？我没找到什么东西可以帮我用iPhone重新创建快照部分。。。。我将制作我自己的动画。

这很容易

html

jquery

// setSkrollr function extracted from https://www.pingdom.com/2013/
var setSkrollr = function($el, data) {
    for (var i = 0, l = data.length; i < l; i++) {
        var d = data[i],
            px = d[0];
            css = d[1];
        $el.attr('data-' + px, css);
    }
}

jQuery(function($) {
    setSkrollr($('#box1'), [[0, 'width:100%'], [1500, 'width:0%']]);
    setSkrollr($('#box2'), [[0, 'transform:translateX(-100%)'], [750, 'transform:translateX(100%)'], [1500, 'transform:translateX(-100%)']]);

    skrollr.init({
        smoothScrolling: false
    });
});

//从中提取的setskroll函数https://www.pingdom.com/2013/
var setSkrollr=函数（$el，数据）{
对于（变量i=0，l=data.length；i

我主要谈论的是整个页面如何捕捉动画的这一部分。非常感谢iPhone动画，尽管它会派上用场。你知道他们是如何完成这一部分的片段之间的捕捉，然后在“与所有婚礼宾客一起工作…”之后停止的吗？顺便说一句，我真的很感谢你的帮助。我知道如何从相对转换到固定。但我不明白如何让实际的滚动部分在部分中工作。滚动时，它会在设置动画时自动从一节滚动到另一节。

body {
  padding: 0;
  margin: 0;
  background: #fff fixed url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAQMAAABJtOi3AAAABlBMVEX4+Pj09PQf/c7fAAAAGklEQVR4Xq3MIQEAAADDIPqX/kvMIMEWEm8O7b0/wewc/NcAAAAASUVORK5CYII=) repeat;
}

#skrollr-wrapper {
  /* make sure the boxes stay in place while you 
     scroll by wrapping them in this fixed div: */
  width:100%;
  height:100%;
  position:fixed;
  overflow: hidden;
}

#skrollr-wrapper div {
  position: absolute;
  overflow: hidden;
  text-align: center;
}

#box1 {
  background: blue;
  margin: auto;
  top: 0; left: 0; right: 0;  bottom: 0;
}

#box2 {
  background: red;
  height: 100px;
  width: 100%;
  margin-top: 50px;
}

// setSkrollr function extracted from https://www.pingdom.com/2013/
var setSkrollr = function($el, data) {
    for (var i = 0, l = data.length; i < l; i++) {
        var d = data[i],
            px = d[0];
            css = d[1];
        $el.attr('data-' + px, css);
    }
}

jQuery(function($) {
    setSkrollr($('#box1'), [[0, 'width:100%'], [1500, 'width:0%']]);
    setSkrollr($('#box2'), [[0, 'transform:translateX(-100%)'], [750, 'transform:translateX(100%)'], [1500, 'transform:translateX(-100%)']]);

    skrollr.init({
        smoothScrolling: false
    });
});