Highlight Elements While Scrolling – Opacity Scroller

Preview:

Description:

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">
      <img
        src="1.jpg"
        alt="And Image"
        height="200"
      />
    </p>
  </div>
</div>

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);
  }
}