javascript - 滚动相关的淡入和淡出文本一旦达到某个点

Question

我有一条短信 <p>和<h1> 。文本以 1 <h1> 结尾。 我想将 <p> 的 Y 平移加速两倍当我到达文档的底部时(最后一个 h1 位于页面的中间)，我希望 h1 保持在页面的中间。 但我想要<p>如果我向上滚动则向后滚动。

有没有一种简单的方法可以使用 jQuery 来做到这一点？ 我尝试了很多在网上找到的解决方案，但都没有令人满意。

$(window).scroll(function(){

    var wScroll = $(document).scrollTop();
    var b = $(document).height() - $(window).height();
    var c = ($(document).height() - wScroll - $(window).height()) * 2;
    var fade = 1 + c / 100;
    var trigger = $('#last').offset().top - $(window).height() / 2;


    if(wScroll > b) {
      $(window).on('scroll', function() {
        $('p').css({
          'transform' : 'translateY('+ c +'px)',
          'opacity' : ''+ fade +''
        })
      })

    }

});

p, h1 {
  font-family: Baskerville;
  margin: auto;
  max-width: 650px;
  color: #333;
}

p {
  font-size: 21px;
  line-height: 33px;
  max-width: 650px;
  margin-top: 30px;
}

p:nth-child(2):first-letter {
  font-family: Arial;
  font-weight: 700;
  float: left;
  font-size: 72px;
  line-height: 63px;
  padding-right: 12px;
}

h1 {
  font-size: 47px;
  margin-top: 30px;
}

h1:last-child {
  margin-bottom: 0px;
}

.container {
  margin-top: 5%;
  margin-bottom: 50vh;
}

    <div class="container">
    <h1>Hello!</h1>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ornare dictum ligula. Maecenas elementum suscipit nisl. Cras imperdiet leo ac felis dictum luctus. Pellentesque odio nisi, accumsan nec, scelerisque sed, consectetuer nec, justo. Sed tortor sapien, suscipit id, pulvinar vel, elementum id, lorem. Nullam consectetuer risus sit amet nibh. Vestibulum consectetuer, quam vitae euismod volutpat, magna magna consectetuer dui, et accumsan magna dui non nibh. Morbi adipiscing consequat erat. Vivamus quis massa eget orci fermentum laoreet. Morbi posuere purus. Duis feugiat lacus vel nisi. Aliquam ipsum felis, pretium sed, vehicula vel, dictum eget, nibh. Morbi turpis nulla, luctus viverra, pretium in, suscipit vitae, purus.</p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ornare dictum ligula. Maecenas elementum suscipit nisl. Cras imperdiet leo ac felis dictum luctus. Pellentesque odio nisi, accumsan nec, scelerisque sed, consectetuer nec, justo. Sed tortor sapien, suscipit id, pulvinar vel, elementum id, lorem. Nullam consectetuer risus sit amet nibh. Vestibulum consectetuer, quam vitae euismod volutpat, magna magna consectetuer dui, et accumsan magna dui non nibh. Morbi adipiscing consequat erat. Vivamus quis massa eget orci fermentum laoreet. Morbi posuere purus. Duis feugiat lacus vel nisi. Aliquam ipsum felis, pretium sed, vehicula vel, dictum eget, nibh. Morbi turpis nulla, luctus viverra, pretium in, suscipit vitae, purus.</p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ornare dictum ligula. Maecenas elementum suscipit nisl. Cras imperdiet leo ac felis dictum luctus. Pellentesque odio nisi, accumsan nec, scelerisque sed, consectetuer nec, justo. Sed tortor sapien, suscipit id, pulvinar vel, elementum id, lorem. Nullam consectetuer risus sit amet nibh. Vestibulum consectetuer, quam vitae euismod volutpat, magna magna consectetuer dui, et accumsan magna dui non nibh. Morbi adipiscing consequat erat. Vivamus quis massa eget orci fermentum laoreet. Morbi posuere purus. Duis feugiat lacus vel nisi. Aliquam ipsum felis, pretium sed, vehicula vel, dictum eget, nibh. Morbi turpis nulla, luctus viverra, pretium in, suscipit vitae, purus.</p>

    <h1 id="last">See ya!</h1>
    </div>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

Answer 1

这是第一步。 如果有人有更好的方法，我会采纳!

$(window).scroll(function(){

// Variables for last paragraph

  var wScroll = $(this).scrollTop();
  var bottom = ($(document).height() - wScroll - $(window).height()) / 2 ;
  var fade = bottom / 100;


  // Last paragraph: fading & scroll x 2

  if(wScroll > $('#last').offset().top - $(window).height()){

    var offset = wScroll - $('h1#last').offset().top + $(window).height();

    // Select all the p, h1 et h2 but not those with id='last'

    $('p, h1, h2').not('#last').css({
      'transform': 'translateY(-' + offset * 0.4 +'px)',
      'opacity' : fade
    });

  }
  });

p, h1 {
  font-family: Baskerville;
  margin: auto;
  max-width: 650px;
  color: #333;
}

p {
  font-size: 21px;
  line-height: 33px;
  max-width: 650px;
  margin-top: 30px;
}

p:nth-child(2):first-letter {
  font-family: Arial;
  font-weight: 700;
  float: left;
  font-size: 72px;
  line-height: 63px;
  padding-right: 12px;
}

h1 {
  font-size: 47px;
  margin-top: 30px;
}

h1:last-child {
  margin-bottom: 0px;
}

.container {
  margin-top: 5%;
  margin-bottom: 50vh;
}

   <div class="container">
    <h1>Hello!</h1>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ornare dictum ligula. Maecenas elementum suscipit nisl. Cras imperdiet leo ac felis dictum luctus. Pellentesque odio nisi, accumsan nec, scelerisque sed, consectetuer nec, justo. Sed tortor sapien, suscipit id, pulvinar vel, elementum id, lorem. Nullam consectetuer risus sit amet nibh. Vestibulum consectetuer, quam vitae euismod volutpat, magna magna consectetuer dui, et accumsan magna dui non nibh. Morbi adipiscing consequat erat. Vivamus quis massa eget orci fermentum laoreet. Morbi posuere purus. Duis feugiat lacus vel nisi. Aliquam ipsum felis, pretium sed, vehicula vel, dictum eget, nibh. Morbi turpis nulla, luctus viverra, pretium in, suscipit vitae, purus.</p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ornare dictum ligula. Maecenas elementum suscipit nisl. Cras imperdiet leo ac felis dictum luctus. Pellentesque odio nisi, accumsan nec, scelerisque sed, consectetuer nec, justo. Sed tortor sapien, suscipit id, pulvinar vel, elementum id, lorem. Nullam consectetuer risus sit amet nibh. Vestibulum consectetuer, quam vitae euismod volutpat, magna magna consectetuer dui, et accumsan magna dui non nibh. Morbi adipiscing consequat erat. Vivamus quis massa eget orci fermentum laoreet. Morbi posuere purus. Duis feugiat lacus vel nisi. Aliquam ipsum felis, pretium sed, vehicula vel, dictum eget, nibh. Morbi turpis nulla, luctus viverra, pretium in, suscipit vitae, purus.</p>

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam ornare dictum ligula. Maecenas elementum suscipit nisl. Cras imperdiet leo ac felis dictum luctus. Pellentesque odio nisi, accumsan nec, scelerisque sed, consectetuer nec, justo. Sed tortor sapien, suscipit id, pulvinar vel, elementum id, lorem. Nullam consectetuer risus sit amet nibh. Vestibulum consectetuer, quam vitae euismod volutpat, magna magna consectetuer dui, et accumsan magna dui non nibh. Morbi adipiscing consequat erat. Vivamus quis massa eget orci fermentum laoreet. Morbi posuere purus. Duis feugiat lacus vel nisi. Aliquam ipsum felis, pretium sed, vehicula vel, dictum eget, nibh. Morbi turpis nulla, luctus viverra, pretium in, suscipit vitae, purus.</p>

    <h1 id="last">See ya!</h1>
    </div>
<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"></script>