[Apple] Scrolling Text Fading Effect Like iPhone 12


Cool Text reveals the effect that fades in and out of text when scrolling down and up the page. Inspired by the Apple iPhone 12 webpage.

Uses the CSS background-position-x property to dynamically change the horizontal position of the gradient background of the text.

How to make use of it:

1. Apply the following CSS kinds to the goal text.

<h1>Text To Animate</h1>
h1 {
  background-image: linear-gradient(75deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33.33%, rgba(255, 255, 255, 0) 66.67%, rgba(255, 255, 255, 0) 100%);
  background-size: 300% 100%;
  background-position-x: calc(100% - var(--percentage));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;

2. The JavaScript to detect scroll events and dynamically change the value of the background-position-x property.

const h1 = document.querySelector('h1')
document.addEventListener('scroll', (e) => {
  let scrolled = document.documentElement.scrollTop / (document.documentElement.scrollHeight - document.documentElement.clientHeight)
  h1.style.setProperty('--percentage', `${scrolled * 100}%`)

Text Fading Effect On Scroll Like Apple iPhone 12, iPhone parallax effect, apple website scroll animation, iPhone message effects words

See Demo And Download

Official Website(stevenlei): Click Here

This superior jQuery/javascript plugin is developed by stevenlei. For extra Advanced Usage, please go to the official website.