Highlight Elements While Scrolling – Opacity Scroller

Category: Animation , Javascript | May 31, 2022
Views Total:2,294 views
Official Page:Go to website
Last Update:May 31, 2022


Highlight Elements While Scrolling – Opacity Scroller


Opacity Scroller is a JavaScript library that uses CSS opacity property to fade in/out elements on page scroll.

It can be used to highlight any element (not only text) when you scroll down the page. This can increase reader focus, helping them to scan and read the text without being distracted.

See It In Action:

How to use it:

1. Download and load the Opacity Scroller library in the document.

<script src="./js/scroller.js"></script>

2. Add your content to the os__text-item elements as follows:

<div class="os__wrapper">
  <div class="os__text-container">
    <p class="os__text-item">This Is</p>
    <p class="os__text-item">Text</p>
    <p class="os__text-item">
        alt="And Image"

3. The necessary CSS styles.

.os__wrapper {
  display: block;
.os__text-container {
  text-align: center;
  position: -webkit-sticky;
  position: sticky;
  padding: 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
.os__text-item {
  color: hotpink;
  font-size: 3rem;
  text-transform: uppercase;
  font-family: sans-serif;
  font-weight: 600;
  opacity: 0.2;
.os__text-item--on {
  opacity: 1;
.os__ghost {
  height: var(--ghost-height);
.last {
  padding-top: 400vh;
@keyframes bounce {
  from {
    transform: translateY(0px);
  to {
    transform: translateY(0.5rem);

You Might Be Interested In:

Leave a Reply