There's a text containing <p> and <h1>. The text finishes with one <h1>.
I'm looking to speed up the Y translation of the <p> twice when I reach the bottom of the document (where the last h1 is located in the middle of the page), while keeping the h1 centered on its own. However, I want the <p> to scroll back up if I scroll back.
Is there an easy way to achieve this using jQuery? I've tried numerous solutions found online, but none have been satisfactory.
$(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>