视差 - 偏移元素,与滚动相关联

Question

我试图找出添加简单视差行为的正确逻辑.

我想在页面上有许多元素,它们的顶部偏移量开始一定距离(例如300px).然后当您向下滚动页面时,一旦元素的顶部被显示,它将缓慢向上移动(绑定到滚动),直到元素的顶部到达视口的中间,此时它的顶部偏移为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演示1.(进入和退出边缘空间效应)
jsBin演示2.(触摸后保留0边距)

而不是针对section元素,(创建和)定位他们的第一个子元素,
否则你将创建一个并发混乱尝试获得最高位置但同时修改它.

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

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父母的唯一第一个孩子.
欢迎您调整上面的代码,使其更高效.