基于滚动百分比的jQuery Animate translationY [英] jQuery Animate translateY Based On Scroll Percentage

问题描述

我正在尝试构建一个没有任何插件的简单重叠视差"效果.我有html之类的

I'm trying to build a simple overlapping "parallax" effect without any plugins. I have html like:

<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>

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

Each section has a height of 100% of the viewport. I'm using an each loop inside $(window).scroll(). I need to animate the transform: translateY() property of the top section until the following section is at the top of the browser. This percentage essentially needs to be based on the percetange from the top of the browser. I've tried a number of things involving getting the offset().top, and height() values, and comparing them to $(window).scrollTop() but I can't seem to work it out. This is the effect I'm trying to achieve, though its using a jQuery plugin.

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

修改 我现在几乎解决了这个问题，但是我有一个小问题可以滚动回到顶部. translate属性不会一直返回到0％并在顶部留有空隙.

Edit I have this almost worked out now, but I have one small issue scroll back to the top. The translate property doesn't go all the way back to 0% and leaves a gap at the top.

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

My codepen: 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 +'%)'});
      }
    });
  });
});

推荐答案

这是一种方法.随意优化它.

Here's one way. Feel free to optimize it if you want.

$(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>

这篇关于基于滚动百分比的jQuery Animate translationY的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！