视差 - 偏移元素，绑定到滚动

Question

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

我想在页面上放置一些元素，这些元素的顶部偏移一定距离（例如 300 像素）。然后当你向下滚动页面时，一旦元素的顶部显示出来，它就会慢慢向上移动（绑定滚动）直到元素的顶部到达视口的中间，此时它的顶部偏移量为 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 元素为目标，而是（创建和）以他们的第一个 child 元素为目标、
否则你会创建一个并发混乱试图获得最高位置但同时修改它。

此外，您不能依赖固定的 300 像素边距（即：如果 window 高度小于 500 像素，您已经少了 100 像素）。当屏幕高度非常小时，space 可能会有所不同，因此您还需要 找到 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 parent 中唯一的第一个 child .
欢迎您调整上述代码以提高性能。

Answer 2

嘿，这是我去遮阳棚的地方。

http://jsbin.com/wibiferili/edit?html,js,output

要旨如下

JS

var $Window = $(window),
    parallaxFactor = 2;

$('.parallaxblock').each(function(a,b){
    var element = $(b);
    element.css("top",element.data("pOffset") + "px");

    $Window.bind('scroll', function() {
        var pos = 
            // Base Offset
            element.data("pOffset")
            // parallaxFactor
            - ($Window.scrollTop() / parallaxFactor);

        pos = pos < 0 ? 0 : pos;

        element.animate({"top": pos + "px"},10);

        return;
    });

});

样式

body{
  height: 4000px;
}

.parallaxblock{
  position:fixed;
  background:#999;
  opacity:.5;
}

示例用法

<div class="parallaxblock" data-p-offset=100>Im A Block</div>
<div class="parallaxblock" data-p-offset=200>Im Also Block</div>
<div class="parallaxblock" data-p-offset=1500>Im Another Block</div>

因此，通过检查最偏移量它永远不会低于 0，我们可以在它到达时将其锁定在屏幕顶部。

我得到了div上数据标签的偏移量。

如果您想更改不同位置的滚动速率，您可以更改屏幕高度的特定百分比的视差系数。

希望对您有所帮助。

视差 - 偏移元素，绑定到滚动

Parallax - Offset element(s), tied to scroll

javascript

jquery

parallax