揭示文本 HTML、CSS、JS 的滚动选项

Question

I want to get an effect like https://www.stpeterscollege.lk/history-of-our-college to a HTML code of mine. Can someone help me with this please?

Answer 1

There is a micro-library named scroll-out that help in scroll detection and that will make it easy for you to get such effect. Here is a link to it.

You just need to add following CSS

[data-scroll] {
  transition: opacity 1s;
}
[data-scroll="in"] {
  opacity: 1;
}
[data-scroll="out"] {
  opacity: 0;
}

And this in HTML to apply scroll effect on all elements.

<script src="https://unpkg.com/scroll-out/dist/scroll-out.min.js"></script>
<script>
  ScrollOut();
</script>

Follow the docs for more info.