Is it possible to dynamically change the color of text based on its position using CSS, JS, or JQuery?

Question

Is it possible to dynamically change the color of text based on its position using CSS, JS, or JQuery?

I am currently working on a corporate website and have been tasked with creating a unique design for a specific page. The design includes the following elements:

A body background gradient that transitions from their primary color to white in a top-to-bottom static manner.

All headers (h1, h2, h3, etc.) must be displayed in white text.

My challenge now is finding a way to ensure that header colors complement the overall design, even when they are not positioned at the very top of the page. This is especially important for sub-headers and section titles.

Is there anyone out there who knows a CSS, Javascript, or jQuery solution that would dynamically change the text color of headers based on their position on the page? For instance, having headers display in white at the top of the page to contrast the primary color of the body gradient, but switch to the primary color further down the page to contrast the white background?

javascript jquery html css

Answer 1

Answer №1

If you're feeling adventurous, you might want to experiment with the css3 filter "invert." While the results may not be perfect at this time, exploring its potential could be interesting.

$(document).ready(function() {
  $("h2").each(function() {
    var offset = $(window).scrollTop() - $(this).position().top;
    var height = $(document).height();
    var percent = (-offset * 100) / height;
    $(this).css({
      'filter': 'invert(' + percent + '%)'
    })
  });
});

body {
  background: #7cf1ff;
  background: -moz-linear-gradient(top, #7cf1ff 0%, #96a0e7 100%);
  background: -webkit-linear-gradient(top, #7cf1ff 0%, #96a0e7 100%);
  background: linear-gradient(to bottom, #7cf1ff 0%, #96a0e7 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#7cf1ff', endColorstr='#96a0e7', GradientType=0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>Headline</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<!-- Repeated headline and paragraph elements for demonstration purposes -->

Answer 2

If you're feeling adventurous, you might want to experiment with the css3 filter "invert." While the results may not be perfect at this time, exploring its potential could be interesting.

$(document).ready(function() {
  $("h2").each(function() {
    var offset = $(window).scrollTop() - $(this).position().top;
    var height = $(document).height();
    var percent = (-offset * 100) / height;
    $(this).css({
      'filter': 'invert(' + percent + '%)'
    })
  });
});

body {
  background: #7cf1ff;
  background: -moz-linear-gradient(top, #7cf1ff 0%, #96a0e7 100%);
  background: -webkit-linear-gradient(top, #7cf1ff 0%, #96a0e7 100%);
  background: linear-gradient(to bottom, #7cf1ff 0%, #96a0e7 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#7cf1ff', endColorstr='#96a0e7', GradientType=0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h2>Headline</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
  sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
<!-- Repeated headline and paragraph elements for demonstration purposes -->

Answer 3

Answer №2

CSS mix-blend-mode offers a similar functionality to what you are looking for, but it may not be well-supported in all browsers particularly IE/Edge.

html,
body {
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, yellow 0%, green 100%);
  font-size: 0;
  height: 200%;
}
.outer {
  display: inline-block;
  width: 200px;
  height: 200px;
  font-family: sans-serif;
  font-size: 40px;
  line-height: 200px;
  text-align: center;
  font-weight: bold;
}
.inner {
  color: white;
  mix-blend-mode: difference;
}
.solid {
  background-color: navy;
}
.gradient-bw {
  background: linear-gradient(180deg, black 0%, white 100%);
}
.gradient-color {
  background: linear-gradient(180deg, navy 0%, orange 100%);
}
.fixed {
  position: fixed;
  padding: 20px;
  right: 0;
  bottom: 0;
  color: white;
  font-size: 40px;
  z-index: 2;
  mix-blend-mode: difference;
}

<div class="outer solid">
  <div class="inner">
    Text!
  </div>
</div>
<div class="outer gradient-bw">
  <div class="inner">
    Text!
  </div>
</div>
<div class="outer gradient-color">
  <div class="inner">
    Text!
  </div>
</div>
<div class="fixed">
  Text!
</div>

Answer 4

CSS mix-blend-mode offers a similar functionality to what you are looking for, but it may not be well-supported in all browsers particularly IE/Edge.

html,
body {
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, yellow 0%, green 100%);
  font-size: 0;
  height: 200%;
}
.outer {
  display: inline-block;
  width: 200px;
  height: 200px;
  font-family: sans-serif;
  font-size: 40px;
  line-height: 200px;
  text-align: center;
  font-weight: bold;
}
.inner {
  color: white;
  mix-blend-mode: difference;
}
.solid {
  background-color: navy;
}
.gradient-bw {
  background: linear-gradient(180deg, black 0%, white 100%);
}
.gradient-color {
  background: linear-gradient(180deg, navy 0%, orange 100%);
}
.fixed {
  position: fixed;
  padding: 20px;
  right: 0;
  bottom: 0;
  color: white;
  font-size: 40px;
  z-index: 2;
  mix-blend-mode: difference;
}

<div class="outer solid">
  <div class="inner">
    Text!
  </div>
</div>
<div class="outer gradient-bw">
  <div class="inner">
    Text!
  </div>
</div>
<div class="outer gradient-color">
  <div class="inner">
    Text!
  </div>
</div>
<div class="fixed">
  Text!
</div>

Answer 5

Answer №3

Is this the solution you've been searching for?

$(window).on("scroll", function() {
    if($(window).scrollTop() > 150) {
        $(".header").addClass("activeOne");
    }        
    else {
       $(".header").removeClass("activeOne");
    }
});

http://jsfiddle.net/jdcutter/634d6vgq/129/

Answer 6

Is this the solution you've been searching for?

$(window).on("scroll", function() {
    if($(window).scrollTop() > 150) {
        $(".header").addClass("activeOne");
    }        
    else {
       $(".header").removeClass("activeOne");
    }
});

http://jsfiddle.net/jdcutter/634d6vgq/129/

Is it possible to dynamically change the color of text based on its position using CSS, JS, or JQuery?

Answer №1

Answer №2

Answer №3

Similar questions

What is the indicator that signals a change in the value of a React ref.current?

Utilizing JavaScript for Formatting and Comparing Dates

Using JQuery to locate radio buttons that have been selected based on a variable

Align text vertically within a link box by overriding inherited CSS styles

What is the procedure for passing arguments to Google signIn in a NextJS backend?

Website layout looking unique due to pixel width adaptation from standard width

Changing the value of an ASP HiddenField within an MVC 4 controller

Embedding Custom CSS Within a Parent CSS Element

Tips on preventing a nested loop's inner ng-repeat from updating when the array undergoes changes

Utilizing the '::marker' pseudo-element for generating Markdown-inspired headers

Loading modules conditionally in Nuxt.js

Step-by-step guide on fetching blog posts from a Ghost blog by utilizing the API in a Vue cli project

Encountering [object, Object] while attempting to display JSON object retrieved from req.body in the console

React forms are experiencing issues with characters overlapping

Using JQuery Ajax to post an array

To ensure secure access to a file, restrict it to only be accessed through Jquery Ajax requests

Is there a way to modify my code to eliminate the need for a script for each individual record?

Transform a PDF document into a Google Doc utilizing the capabilities of the Google Drive API version 3

Best practices for executing an asynchronous forEachOf function within a waterfall function

The tooltips in the WordPress-Gulp-Starter-Kit running on Bootstrap 5 do not seem to be functioning properly