Author: | Steven Lei |
---|---|
Views Total: | 2,797 views |
Official Page: | Go to website |
Last Update: | October 22, 2020 |
License: | MIT |
Preview:

Description:
A fancy text reveal effect that fades in and out your text when scrolling down & up the page. Inspired by Apple iPhone 12 webpage.
It uses CSS background-position-x
property to dynamically change the horizontal position of the gradient background of your text depending on the scroll position.
How to use it:
1. Apply the following CSS styles to the target 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}%`) })