css scroll fade in
<div class="About-Text fade-in" charset=UTF-16>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae totam necessitatibus ex, illo esse voluptas nulla corporis aspernatur assumenda at, officia reiciendis. Distinctio aliquid repellat, exercitationem, vitae suscipit quo quae fuga quaerat quia, repudiandae dolores illo ea id totam. Ad perferendis debitis recusandae. Incidunt vitae quae, saepe voluptatum voluptas accusamus error dolorem ipsam iusto. Nobis totam eius quos atque rem illum voluptatem, voluptas doloremque cumque molestiae eveniet molestias porro sit cupiditate placeat delectus maxime, eligendi labore nam facilis doloribus! Corporis, tenetur saepe. Quas soluta temporibus eaque sit cumque iusto est amet numquam, quae optio maxime, neque sed nihil omnis reprehenderit?
</div>
<script>
const faders = document.querySelectorAll('.fade-in');
const appearOptions = {
threshold:1
};
const appearOnScroll = new IntersectionObserver(function(entries,appearOnScroll) {
entries.forEach(entry =>
{
if(entry.isIntersecting)
{
entry.target.classList.remove('appear');
entry.target.classList.remove('disappear');
entry.target.classList.add('appear');
}
else
{
entry.target.classList.remove('appear');
entry.target.classList.remove('disappear');
entry.target.classList.add('disappear');
}
})
},
appearOptions);
faders.forEach(fader =>{
appearOnScroll.observe(fader);
});
</script>