Change Text Color on Scroll

Description

• change color of individual sections of text on the scroll, color changes as you scroll.
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. First add text #onscroll to your Text Block

#1.2. Hover on Page where you use Text Block > Click Gear icon

#1.3. Click Advanced > Paste this code

• If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

<!-- 07.26c07v5 Change Text Color on Scroll -->
<script>
  const OnScrollOptions = {
    highlightColor: "#0fd10f",
    scrubSpeed: 0.3,
    startPosition: "top 80%",
    endPosition: "top 20%"
  };
</script>
<script src="https://code.beaverhero.com/textblock/0726c07v5textcoloronscroll.js"></script>

#2. Customize

#2.1. To change scroll color, change line 04

highlightColor: "#0fd10f",

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can add a Markdown Block under Text Block

Then add this code into Markdown Block.

<script>
  const OnScrollOptions = {
    highlightColor: "#0fd10f",
    scrubSpeed: 0.3,
    startPosition: "top 80%",
    endPosition: "top 20%"
  };
</script>
<script src="https://code.beaverhero.com/textblock/0726c07v5textcoloronscroll.js"></script>