Slide Text in and out based on window and scroll
$(window).scroll(function() {
// calculate the percentage the user has scrolled down the page
var scrollPercent = 300 * $(window).scrollTop() / ($(document).height() - $(window).height());
var scrollPercent2 = 400 * $(window).scrollTop() / ($(document).height() - $(window).height());
$('.animation-element').css('right', scrollPercent +"%");
$('.animation-element-2').css('right', scrollPercent2 +"%");
});
<h1 class="animation-element custom-font"> TESORO </h1>
<h1 class="animation-element-2 custom-font-2"> COLLECTIVE </h1>
/* --------------------------- */
/* HOME PAGE ANIMATION STYLES */
/* --------------------------- */
/* TESORO TEXT POSITIONING (plz don't edit) */
.animation-element {
position: fixed;
right: 0%;
}
/* COLLECTIVE POSITIONING (plz don't edit) */
.animation-element-2 {
position: fixed;
right: 0%;
}
/* TESORO TEXT FONT STYLES */
h1.custom-font {
top: 150px;
font-size: 10em;
margin-right: -100px;
}
/* COLLECTIVE TEXT FONT STYLES */
h1.custom-font-2 {
top: 300px;
font-size: 10em;
margin-right: -500px;
}