CODEWITHSUNDEEP
htmlcsssvg
Rui Costa
Rui Costa

Reputation: 800

Change svg fill color onScroll

How can i change the fill color of an SVG logo onScroll; ¿thats posible with html or any css property? The color change when you scroll when on another DIV

enter image description here

Upvotes: 1

Views: 876

Answers (1)

enxaneta
enxaneta

Reputation: 33044

The idea is to use mix-blend-mode: differencein CSS together with isolation: isolate; for the group. It's up to you how you want to move the layers. I'm using an input type range for this. You may use scroll or wheel.

I hope this helps.

percent.addEventListener("input",()=>{
  let val = ~~(percent.value);
  let _var = map(100-val,0,100,3,27);
  txt.textContent = val+"%";
  pth.setAttributeNS(null,"d",`M3,27H27V${_var}H3z`)
})

function map(n, a, b, _a, _b) {
  let d = b - a;
  let _d = _b - _a;
  let u = _d / d;
  return _a + n * u;
}
svg{border:1px solid; font-size:10px; background:lightblue}
[type="range"]{width:150px;}
<svg viewBox="0 0 30 30" width="150">
  <g style="isolation: isolate;">
  <path d="M3,27H27V3H3z" fill="white" />
  <path id="pth" d="M3,27H27V15H3z"  />
  <text id="txt" x="15" y="15" dominant-baseline="middle" text-anchor="middle" fill="white" style="mix-blend-mode: difference;">50%</text>
  </g>
</svg>


<p><input id="percent" type="range" value="50" /></p>

Upvotes: 2

Related Questions