I came across a fascinating website - - where the background-position changes on scroll() from a linear gradient with two colors to smoothly slide one color off the screen. While I grasped how they achieved the split colors using linear-gradient, I'm struggling to understand the animation effect where the red color seems to 'push' the white color horizontally off the screen.
Here is an attempt I made recently. My ultimate goal is to implement this on scroll, but for now, I'm testing it on click. I've included a hover style for testing purposes as well.
$(document).ready(function() {
$("button").click(function() {
$(".box").css('background-position': 'left');
});
});.box {
width: 100px;
height: 100px;
display: inline-block;
background-size: 200% 200%;
transition: background-position 1s;
background-image: linear-gradient(to right, blue 50%, green 0);
background-position: right;
}
.box:hover {
background-position: left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="box"></div>
<br>
<button>Toggle background position</button>