javascript - jQuery Animate translateY 基于滚动百分比

Question

我试图在没有任何插件的情况下构建一个简单的重叠“视差”效果。我有这样的 html:

<section>
    <h2>Example Text</h2>
</section>
<section>
    <h2>Example Text</h2>
</section>
<section>
    <h2>Example Text</h2>
</section>
<section>
    <h2>Example Text</h2>
</section>
<section>
    <h2>Example Text</h2>
</section>

每个部分的高度都是视口(viewport)的 100%。我在 $(window).scroll() 中使用了一个 each 循环。我需要为顶部的 transform: translateY() 属性设置动画，直到下一部分位于浏览器的顶部。这个百分比基本上需要基于浏览器顶部的百分比。我尝试了很多方法，包括获取 offset().top 和 height() 值，并将它们与 $(window).scrollTop 进行比较() 但我似乎无法解决。这是我试图实现的效果，尽管它使用了 jQuery 插件。

http://codepen.io/rocbear/pen/bdIaG

编辑 我现在几乎已经解决了这个问题，但是我有一个小问题滚动回到顶部。 translate 属性不会一直回到 0%，而是在顶部留下一个空隙。

我的代码笔:http://codepen.io/mdmoore/pen/MwjoLZ

$(function(){
  $('section').each(function() {
    var off = $(this).offset().top
    $(this).data('orig-offset', off);
  });
  $(window).scroll(function(){
    var scrollTop = $(window).scrollTop();

    $('section').each(function(){
      var off = $(this).data('orig-offset');
      var translate =  (scrollTop - off) / $(window).height() * 100;
      if (scrollTop >= off) {
        $(this).css({transform: 'translateY(' + translate +'%)'});
      }
    });
  });
});

Answer 1

这是一种方法。如果需要，请随意对其进行优化。

$(function(){
  $('section').each(function() {
    var off = $(this).offset().top
    $(this).data('orig-offset', off);
  });
  $(window).scroll(function(){
    var scrollTop = $(window).scrollTop();

     $('section').each(function(){
      var off = $(this).data('orig-offset');
      
       
      if (scrollTop >= off) {
        var translate =  (scrollTop - off) / $(window).height() * 100;
        console.log(translate);
        $(this).css({transform: 'translateY(' + translate +'%)'});
      }
     });
  });
});

html, body {
  height: 100%;
  margin: 0;
}

h2 {
  margin: 0;
  text-align: center;
}

section {
  background: #000;
  height: 100%;
  width: 100%;
  position: relative;
  top: 0;
}
section:first-of-type {
  background-color: coral;
}
section:nth-of-type(2) {
  background-color: lightgreen;
}
section:nth-of-type(3) {
  background-color: lightblue;
}
section:nth-of-type(4) {
  background-color: #ffff6e;
}
section:nth-of-type(5) {
  background-color: #3c3c3c;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="top">
<h2>Some Text</h2>
</section>
<section>
<h2>Some Text</h2>
</section>
<section>
<h2>Some Text</h2>
</section>
<section>
<h2>Some Text</h2>
</section>
<section>
<h2>Some Text</h2>
</section>