css 根据窗口和滚动滑入和滑出文本

Posted 2021-05-13

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