How can I make <p> elements change color when scrolling?

Question

How can I make <p> elements change color when scrolling?

My Goal

https://i.sstatic.net/JbdXR.gif
I aim to bring attention to the <p> element as the user scrolls on the page.
Initially, the opacity is set to 0.3, but I want it to change to 1 gradually as the user scrolls down.

My Attempt

window.onscroll = function {scrHL};

function scrHL() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.querySelector('.main-p p').style.opacity = '1';
  } else {
    document.querySelector('.main-p p').style.opacity = '.3';
  }
}

However, this code didn't achieve the desired effect. What am I missing?
How can I toggle the highlighting of <p> each time a scroll event occurs?

Current Situation

https://i.sstatic.net/knLUh.gif
The current state is not producing the expected highlight when changing the numbers within the code. Why is that happening?

The Code

HTML

<div class="mai">
  <section class="main-p"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>

  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

  <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p></section>
</div>

CSS

.mai {
  margin: 2.8rem 0 0 0;
  height: 37.8rem;
  overflow-y: scroll;
  overflow-x: hidden;
  -ms-overflow-style:none;
}
.mai::-webkit-scrollbar {
  display:none;
}

.main-p {
  white-space: pre-wrap;
}

JS

window.onscroll = function {scrHL};

function scrHL() {
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    document.querySelector('.main-p p').style.opacity = '1';
  } else {
    document.querySelector('.main-p p').style.opacity = '.3';
  }
}

javascript jquery html css

Answer 1

Answer №1

Check out this simple demonstration, give it a try in full screen mode (click on the full screen link once you run the snippet)... I believe it will meet your requirements perfectly :)

// Set boundaries for highlighting
// Suggest creating a 'highlighter area' related to an element
var highlight_from = 200;
var highlight_to = 400;

$(document).ready(function(){

  $(document).scroll(function(){

    trackScroll();

  });

  // Highlight something at the beginning when the page loads
  trackScroll();

});

function trackScroll() {
  var scrollTop = $(window).scrollTop();

  $("p").each(function(i) {

    $("p").eq(i).removeClass("highlight");

    var pos = $("p").eq(i).position()['top'] - scrollTop;

    if ((pos > highlight_from) && (pos < highlight_to))
    {
      $("p").eq(i).addClass("highlight");
    }
  });
}

p {opacity: 0.3; }
.highlight { opacity: 1 !important; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget finibus mauris, malesuada maximus urna. Aliquam tristique augue hendrerit ultricies commodo...</p>

<p>Cras venenatis iaculis ex, in elementum neque suscipit quis. Morbi diam ipsum, cursus id dictum et, rhoncus non purus. Donec vitae dui eu neque faucibus varius...</p>

<p>Maecenas sed ipsum ac lacus porta finibus auctor a arcu. Suspendisse convallis massa ut orci commodo, et vulputate mauris cursus. In iaculis convallis lorem...</p>
<p>Fusce eu bibendum velit. Praesent at sem imperdiet, condimentum diam imperdiet, tempor enim. Nam vitae mattis massa. Donec malesuada quis magna in finibus. Aenean ac...

Answer 2

Check out this simple demonstration, give it a try in full screen mode (click on the full screen link once you run the snippet)... I believe it will meet your requirements perfectly :)

// Set boundaries for highlighting
// Suggest creating a 'highlighter area' related to an element
var highlight_from = 200;
var highlight_to = 400;

$(document).ready(function(){

  $(document).scroll(function(){

    trackScroll();

  });

  // Highlight something at the beginning when the page loads
  trackScroll();

});

function trackScroll() {
  var scrollTop = $(window).scrollTop();

  $("p").each(function(i) {

    $("p").eq(i).removeClass("highlight");

    var pos = $("p").eq(i).position()['top'] - scrollTop;

    if ((pos > highlight_from) && (pos < highlight_to))
    {
      $("p").eq(i).addClass("highlight");
    }
  });
}

p {opacity: 0.3; }
.highlight { opacity: 1 !important; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget finibus mauris, malesuada maximus urna. Aliquam tristique augue hendrerit ultricies commodo...</p>

<p>Cras venenatis iaculis ex, in elementum neque suscipit quis. Morbi diam ipsum, cursus id dictum et, rhoncus non purus. Donec vitae dui eu neque faucibus varius...</p>

<p>Maecenas sed ipsum ac lacus porta finibus auctor a arcu. Suspendisse convallis massa ut orci commodo, et vulputate mauris cursus. In iaculis convallis lorem...</p>
<p>Fusce eu bibendum velit. Praesent at sem imperdiet, condimentum diam imperdiet, tempor enim. Nam vitae mattis massa. Donec malesuada quis magna in finibus. Aenean ac...

Answer 3

Answer №2

Let's delve into the Intersection Observer API—an innovative solution provided by browser vendors to alleviate the challenges associated with traditional scroll binding.

As mentioned on MDN:

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

Here is a demonstration:

// Fires when element or elements appear in the viewport
function onEntry(entry) {
  entry.forEach(el => {
    if (el.isIntersecting) {
      el.target.classList.add("visible");
    }
  });
}

// Instantiate a new Intersection Observer
let observer = new IntersectionObserver(onEntry);

// All paragraphs
let elements = document.querySelectorAll("p");

for (let elm of elements) {
  observer.observe(elm);
}

p {
  line-height: 1.25;
  font-family: helvetica;
  opacity: 0.3;
  transition: 0.8s opacity 0.15s ease-in-out;
}

p.visible {
  opacity: 1;
}

<p><strong>What's up, POP?</strong></p>
<p>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit.... [Truncated for brevity]
</p>
[Repeating paragraph content for display purposes]

Answer 4

Let's delve into the Intersection Observer API—an innovative solution provided by browser vendors to alleviate the challenges associated with traditional scroll binding.

As mentioned on MDN:

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

Here is a demonstration:

// Fires when element or elements appear in the viewport
function onEntry(entry) {
  entry.forEach(el => {
    if (el.isIntersecting) {
      el.target.classList.add("visible");
    }
  });
}

// Instantiate a new Intersection Observer
let observer = new IntersectionObserver(onEntry);

// All paragraphs
let elements = document.querySelectorAll("p");

for (let elm of elements) {
  observer.observe(elm);
}

p {
  line-height: 1.25;
  font-family: helvetica;
  opacity: 0.3;
  transition: 0.8s opacity 0.15s ease-in-out;
}

p.visible {
  opacity: 1;
}

<p><strong>What's up, POP?</strong></p>
<p>
  Lorem ipsum dolor sit, amet consectetur adipisicing elit.... [Truncated for brevity]
</p>
[Repeating paragraph content for display purposes]

How can I make <p> elements change color when scrolling?

My Goal

My Attempt

Current Situation

The Code

Answer №1

Answer №2

Similar questions

Exploring the features of the AJAX event object within a callback setting

Creating an internal link to navigate to a specific element ID within another Angular component

Problem with Jquery Sticky Navigation

Switching the visibility of multiple textareas from block to none

JavaScript code is functioning properly on Chrome and Internet Explorer, however, it may not be working on FireFox

To ensure a successful redirection process without information loss, it is essential to address any potential issues with data input into

Concerns with combining key value pairs in Typescript Enums

What is a method to prevent a div from being rendered in CSS, rather than simply hiding it from view

Modify the size value dialog during runtime

Troubleshooting a CSS layout problem: Organizing a webpage layout using CSS that includes an

Assess html code for Strings that include <% %> tags along with embedded scripts

Node.js equivalent of hash_hmac

Serialize the selected options in a form from multiple select boxes

Do not open iframe links in a new window

Issue with Ajax call not properly updating the DIV section within the designated refresh interval

Vue - when multiple parents share a common child component

AngularJS - Array binding issue not updating in directive

How come this particular design is being passed down from a predecessor (and not a direct parent) div?

What is the best way to insert a two-worded value into the value attribute of an input tag using Express-Handlebars?

Comparing jQuery and Yahoo UI API Design