Trying to design a unique CSS effect where there is a fixed colored element in the top left corner of a webpage. The background consists of different stages or chunks (red, green, blue) each with a height of 1000px. I want the color of the icon to transition at each "bridge" between these stages. Visualizing two halves of fixed elements overlapping to create one cohesive unit.
Check out the CSS below:
.stage{width:100%;height:1000px;position:relative;}
.stage.one{background:red;z-index:1;}
.stage.two{background:green;z-index:1;}
.stage.three{background:blue;z-index:1;}
.box{width:50px;height:50px;position:fixed;margin:10px;}
.box.one{background:purple;z-index:1;}
.box.two{background:orange;z-index:1;}
.box.three{background:yellow;z-index:1;}
Now onto the HTML code:
<div class="box one"></div>
<div class="box two"></div>
<div class="box three"></div>
<div class="stage one">
<div class="box one"></div>
</div>
<div class="stage two">
<div class="box two"></div>
</div>
<div class="stage three">
<div class="box three"></div>
</div>
Looking for a CSS-only solution here, avoiding JavaScript to push the limits of what can be achieved solely through styling.