CODEWITHSUNDEEP
javascriptsvgscroll
р2д2
р2д2

Reputation: 13

change in the color of the bars when scroll

I need to add a change in the color of the bars when the scroll: when loading the page, the bars should be filled with green, and when using the scrolling, use the fill color on the red

Can this be done with simply do it on native javascript?

Upvotes: 1

Views: 47

Answers (1)

Alexey G
Alexey G

Reputation: 1118

Try this

var scrollTimeout;
window.onscroll = function() {
  clearTimeout(scrollTimeout);
    svg.selectAll(".bar").style('fill', 'red');
    scrollTimeout = setTimeout(function() {
       svg.selectAll(".bar").style('fill', 'steelblue');
    }, 500);
}

Ok. So to change color dynamically, you can use HSL color and change first value. I use 0-125 period which is from red to green.

var scrollHeight = document.body.scrollHeight - window.innerHeight;
window.onscroll = function() {
    var color = 125 - 125 / scrollHeight * window.pageYOffset;
    svg.selectAll(".bar").style('fill', function(){return 'hsl('+color+', 100%, 50%)'});
}

also, if u need to tune color hue, just play with last two parameters

Upvotes: 1

Related Questions