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

这是简单的视差效果

首先，保证金不是一个好的属性（性能问题）更好的是转换：translate3D（0px，0px，0px） - ＆gt; translate3D（0像素，-100px，0像素）

如果你愿意，我可以写更多，translate3D如何运作。

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

如果您现在想了解更多有关性能的信息 https://developers.google.com/web/fundamentals/performance/rendering/

Answer 2

我必须完全覆盖代码，但这可以正常工作。要调整速度，只需将乘数从.5调整为您想要的任何值。

＆＃13;

jQuery(document).ready(function($){

  $(window).scroll(function(){
    $(".container .foreground").css({
      top:$(".container").height()/2-$(this).scrollTop()*.5
    });
  });
  
});

＆＃13;

body {
  padding:0;
  margin:0;
}

.container {
  position:relative;
  overflow:hidden;
}

.container .background {
  width:100%;
  height:100%;
  display:block;
}

.container .foreground {
  position:absolute;
  font-size:40px;
  color:yellow;
  z-index:1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.spacer {
  height:400px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <img class="background" src="http://neil.computer/s/1.jpg" />
  <div class="foreground">
    Testing text
  </div>
</div>

<div class="spacer">

</div>

＆＃13;

以不同的速度滚动div

2 个答案: