[Apple] Scrolling Text Fading Effect Like iPhone 12

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.

Share