スクロール依存のフェードインとアウトテキストが一度特定のポイントに達した

Question

<p>と<h1>というテキストがあります。テキストは1つの末尾に<h1>で終わります。 <p>のY変換を2倍に加速したいのですが（最後の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>