javascript - 以不同的速度滚动 div

Question

我正在尝试创建在 http://anagram.paris/work/burgerking 的标题中看到的效果向下滚动时文本移动的位置。

我正在尝试使用 css 边距和 jQuery 来完成它，但它似乎并不正确。我正在使用 flex 将所有内容垂直居中，所以我认为这也可能会影响它。

jQuery(document).ready(function($){

var offset = 175,
scroll_top_duration = 1500,

// bind with the button link
$animation = $('.spacer');

$(window).scroll(function(){
if( $(this).scrollTop() > offset ) {
   $animation.addClass('stretch');
}
else
{
    $animation.removeClass('stretch');
}
});

CSS

.flex {
  display: -webkit-flex;
  display: flex;
  flex: 1;
  align-items: center;
}
.spacer.stretch { padding-top: 4%; }

.spacer {
  position: relative;
  transition: padding .35s 0s ease; 
}

html

<div class="jumbotron indx-jumbotron flex">
<div class="row flex">
    <div class="col-xs-8 col-xs-offset-2">

        <h1 class="spacer">Hi, I'm <strong>Lucas</strong></h1>
        <p class="spacer">Lorem ipsum dolor sit amet,</p>
        <div class="spacer">Button</div>

    </div>
</div>  

Answer 1

这是简单的视差效果

起初，margin 不是一个很好的属性来做到这一点(性能问题)更好的是 transform: translate3D(0px,0px,0px) -> translate3D(0px,-100px,0px)

如果你愿意，我可以写更多，translate3D 的工作原理。

但是如果你想准备好使用解决方案，请看这里 http://scrollmagic.io/

如果你现在想更多地了解性能 https://developers.google.com/web/fundamentals/performance/rendering/