dynamically change text color (as a linear gradient) based on page scroll

Question

I'd like to dynamically change text color (as a linear gradient) based on page scroll position from top.

window.onscroll=function(){getPosition()}

function getPosition()
{
  var scrollPos = $(window).scrollTop();
  loggy(""+scrollPos,3);
}

the code above gives me the position from the top of the page. What I would like to do is to have a function that gives me back a color, and such color is based on a linear gradient that depends on the scrollPos value.

the linear gradient should start from rgb(201,69,109) to rgb(18,23,28) , and it has to "span" it from scrollPos=0 to scrollPos=1400

Is there a way to do this ?

function(scrollPos){
  var  color = f_color(scrollPos);
  return color;
}

EDIT : here How to get color value from gradient by percentage with javascript? I found this example that changes color from red to green. But I haven't succeeded in setting custom colors as mine

$('#elm').css({color: 'rgb(' + ((100 - percent) *2.56) +',' + (percent *2.56) +',0)'})

(100*scrollPos)/1400 with this as the percentage

What have you tried? Try starting with code that produces any linear gradient statically and then see what parts of that you can extract and replace with variables that get their values dynamically. — Scott Marcus, Oct 28 '19 at 20:14
You'll probably wanna make 3 variables that change based off scroll position and use them in your `rgb()` colors. — Adam Buchanan Smith, Oct 28 '19 at 20:35
Actually, just googled it and wa-la https://stackoverflow.com/questions/52637835/dynamically-change-background-color-on-scroll — Adam Buchanan Smith, Oct 28 '19 at 20:36
@Adam Buchanan Smith, That's a solid color, not a gradient from color A to color B — NPLS, Oct 28 '19 at 20:39
@NPLS it will work the same, take the code and mess with it a bit. You'll get it from there. — Adam Buchanan Smith, Oct 28 '19 at 20:43

rook218 · Answer 1 · 2019-10-28T20:48:12.920

First you'll want to find your RGB values that you want to scroll between. I'll assume you want to go between pure black and pure white with gray in between (0 to 255 in all three RGB values)

const text = document.querySelector('#id');
window.onscroll(function() {
    // gets your entire window height to scale to 255
    let colorVal = window.scrollHeight / (window.height / 255);

    text.style.color = "rgb(" + colorVal + "," + colorVal + "," + colorVal + ")";
}

Of course if you want something more subtle or beautiful you can play with the values in a function like this one.

dynamically change text color (as a linear gradient) based on page scroll

1 Answers1