javascript - 仅在网站的一个部分上捕捉部分

Question

我最近看到很多网站都包含从一个部分到另一个部分的滚动，比如fullpage.js，我试图只在页面的一个部分上实现这一点，比如这个页面婚礼派对应用程序。有谁知道我怎么能做到这一点？我没有找到可以帮助我用 iPhone 重新创建捕捉部分的东西......我将制作自​​己的动画。

Answer 1

这很容易

html

<div id="skrollr-wrapper">
    <div id="box1">box1</div>
    <div id="box2">box2</div>
</div>

<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>

css

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

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