Skip to content
← Back to Community
Text fading in on scroll
Profile icon
ibProject

Does anyone know how to make it so that when I scroll to a certain point on my HTML website, the text will fade in? Or any tutorials that can help with this?

Any help would be great!

Voters
Profile icon
FOONGSTER12
Profile icon
ibProject
Comments
hotnewtop
Profile icon
RYANTADIPARTHI

USE THIS FOR THE CSS:

.fade-in-section {
opacity: 0;
transform: translateY(20vh);
visibility: hidden;
transition: opacity 0.6s ease-out, transform 1.2s ease-out;
will-change: opacity, visibility;
}
.fade-in-section.is-visible {
opacity: 1;
transform: none;
visibility: visible;
}

AND THIS FOR THE JAVASCRIPT:

function FadeInSection(props) {
const [isVisible, setVisible] = React.useState(true);
const domRef = React.useRef();
React.useEffect(() => {
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => setVisible(entry.isIntersecting));
});
observer.observe(domRef.current);
return () => observer.unobserve(domRef.current);
}, []);
return (
<div
className={fade-in-section ${isVisible ? 'is-visible' : ''}}
ref={domRef}
>
{props.children}

);
}

If it isn't enough, then here are a few links:

https://css-tricks.com/text-fade-read-more/
https://www.superhi.com/blog/how-to-add-web-design-elements-that-fade-in-and-out-on-scroll

Profile icon
Bookie0

@RYANTADIPARTHI you should try to explain the code a bit instead of spoonfeeding..

Profile icon
RYANTADIPARTHI

@Bookie0 i guess, but i gave the person more links to understand it instead of me telling.

Profile icon
Bookie0

@RYANTADIPARTHI yes, but do those links explain exactly what you wrote for the code? You can always add some comments to briefly explain ¯\_(ツ)_/¯

Profile icon
RYANTADIPARTHI

@Bookie0 ok, sure, i'll do that next time. But yes, the links explain in a detailed way what I did.

Profile icon
Bookie0
Profile icon
RYANTADIPARTHI
Profile icon
Coder100

Here's something

Solution

Thank you bing

Profile icon
Bookie0

eww bing lol @Coder100

Profile icon
Coder100

xd google baf @Bookie0

Profile icon
Bookie0

@Coder100 might be baf but its easy, has all my bookmarks, can support dark theme, has my add-ons and extensions, and automatically signs into docs, sheets, slides, gmail, etc.

lol

Profile icon
Coder100
Profile icon
Coder100

that's chrome not google @Bookie0

Profile icon
Bookie0

@Coder100 google chrome lol

Profile icon
Bookie0

@Coder100 fabulous

Profile icon
DynamicSquid

I saw this post which kinda explains it