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

Parallax - Offset element(s), tied to scroll

本文关键字：绑定 滚动 元素 视差      更新时间：2023-09-26

敲打我的头，试图理清添加简单视差行为的正确逻辑。

我想在页面上有许多元素，这些元素的顶部偏移量以一定距离（例如 300px）开始。然后，当您向下滚动页面时，一旦元素的顶部显示出来，它将缓慢向上移动（与滚动绑定），直到元素的顶部到达视口的中间，此时它的顶部偏移量为 0 并且它保持在原位。

我尝试

使用第三方脚本（滚动魔术，恒星等），但是当我现在无法获得它时，我正在尝试自定义代码：

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

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

嘿，

这是我在遮阳篷上的选择。

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 上数据标签的偏移量。

如果您想更改不同姿势的滚动速率，您可以在屏幕高度的一定百分比下更改视差因子。

希望这有帮助。

相关文章：