Highlight Elements While Scrolling – Opacity Scroller

Category: Animation , Javascript | May 31, 2022
Author:FocusCookie
Views Total:499 views
Official Page:Go to website
Last Update:May 31, 2022
License:MIT

Preview:

Highlight Elements While Scrolling – Opacity Scroller

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

You Might Be Interested In:


Leave a Reply