Kay GoshoI don't know how many people have wrote this kind of articles, but wrote fade in image or text without jQuery.
.fadein {
opacity: 0;
}
.fadein.is-active {
opacity: 1;
transition: all ease 0.65s;
}
// Fade in Threshold
const screenOffset = window.innerHeight / 2
const elements = document.getElementsByClassName('fadein')
for (let element of elements) {
window.addEventListener('scroll', () => {
if (window.scrollY + screenOffset > element.offsetTop) {
element.classList.add('is-active')
}
})
}
<p style="height: 100vh">Prints out this usage information.</p>
<img class="fadein" src="https://www.google.co.jp/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
If you use React, you should write the above code in componentDidMount.
Ref:
