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

Question

帮我理清了添加简单视差行为的正确逻辑。

我想在页面上有多个元素，它们的顶部偏移一定的距离（例如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 ? 
     } 

    } 

    }); 

}); 

Answer 1

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

而是定位到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父母的唯一的第一个孩子。
欢迎您调整上述代码，使其更具性能。

Answer 2

嘿所以，这里是我的一举一动。

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

它的JIST如下。

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

}); 

通过检查offest我样式

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> 

所以ts永远不会低于0，我们可以将它锁定在屏幕的顶部。

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

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

希望这会有所帮助。