javascript - 视差 - 偏移元素，绑定(bind)到滚动

Question

我绞尽脑汁想找出添加简单视差行为的正确逻辑。

我想在页面上放置一些元素，它们的顶部偏移一定距离(例如 300 像素)。然后当你向下滚动页面时，一旦元素的顶部显示出来，它就会慢慢向上移动(绑定(bind)滚动)直到元素的顶部到达视口(viewport)的中间，此时它的顶部偏移量为 0 并且它保持在原位。

我尝试使用第三方脚本(Scroll Magic、Stellar 等)，但是当我现在无法获得它时，我正在尝试自定义代码:

https://jsfiddle.net/louiswalch/5bxz8fku/1/

var $Window = $(window);
var offset_amount = 400;
var window_height = $Window.height();
var window_half   = (window_height/2);
var sections      = $('SECTION.reveal');

sections.each(function() {

  var element = $(this);

  // Make sure we always start with the right offset
  element.css({top: offset_amount});

  $Window.bind('scroll', function() {

    var viewport_top    = $Window.scrollTop();
    var viewport_middle = viewport_top + (window_height/2)
    var viewport_bottom = viewport_top + window_height;
    var element_top     = element.offset().top;

    if (element_top > viewport_top &&  element_top <= viewport_bottom) {

      var distance_to_middle  = (element_top - viewport_middle);
      var amount_to_middle    = (distance_to_middle / window_half);

      console.log(amount_to_middle);

      if (amount_to_middle >= 0) {
        element.css({top: (offset_amount * amount_to_middle)+ 'px'});
      } else {
        // ? Lock to end position ?
      }

    }

  });

});

Answer 1

jsBin demo 1. (margin space effect on both enter and exit)
jsBin demo 2. (preserve 0 margin once touched)

而不是定位 section元素，(创建和)定位他们的第一个子元素，
否则你会创建一个并发困惑试图获得最高位置但同时修改它。

此外，您不能依赖固定的 300 像素边距(即:如果窗口高度小于 500 像素，则您已经少了 100 像素)。当屏幕高度非常小时，该空间可能会有所不同，因此您还需要找到 idealMarg值(value)。

var $win = $(window),
    $rev = $('.reveal'),
    winH2 = 0,
    winSt = 0;

function reveal() {

  winSt = $win.scrollTop();
  winH2 = $win.height()/2;

  $rev.each(function(i, el){
    var y = el.getBoundingClientRect().top,
        toMiddleMax = Math.max(0, y-winH2),
        idealMarg   = Math.min(300, toMiddleMax),
        margMin     = Math.min(idealMarg, idealMarg * (toMiddleMax/winH2));
    $(">div", this).css({transform: "translateY("+ margMin +"px)"});
  });

}

$win.on({"load resize scroll" : reveal});

*{box-sizing:border-box; -webkit-box-sizing:border-box;}
html, body{height:100%; margin:0;}

section > div{
  padding: 40px;
  min-height: 100vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section>
  <div style="background-color:red">1</div>
</section>
<section class="reveal">
  <div style="background-color: yellow">2</div>
</section>
<section class="reveal">
  <div style="background-color: orange">3</div>
</section>
<section class="reveal">
  <div style="background-color: pink">4</div>
</section>

我在 HTML 中只使用了一个 <div>从逻辑上讲，那必须是 section 的唯一第一个 child parent 。
欢迎您调整上述代码以提高性能。