Trying to create a div that switches the background image every X pixels scrolled. Initially experimented with changing the background-image, including using sprites and adjusting background position, but encountered a distracting "flickering" effect.
Example can be viewed here: (note that this example does not utilize sprites, yet still demonstrates the flickering issue).
As an alternative approach, tested loading the sprite only once and modifying solely the background-position property. This method worked smoothly when using values like center left or top left. However, specifying pixel coordinates (e.g. background-position: 50px 0px;) resulted in unexpected image animation.
Achieved the desired effect by implementing:
<div
style="
width: 600px;
height: 1000px;
position: static;
background: url('./Testapp_files/merry1.png');
background-position: 50px 0px;
"
data-0="background-position: 150px 0px;"
data-150="background-position:500px 0px;"
data-250="background-position: 25px 0px;"
data-350="background-position: 0px 0px;"
class="skrollable skrollable-between"></div>
Another scenario:
<div
style="
width: 600px;
height: 1000px;
position: static;
background: url('file:///Users/ste/Downloads/Archivio/Testapp_files/m./Testapp_files/merry1.jpg');
background-position: top left;
"
data-0="background-position: top right;"
data-150="background-position: center left;"
data-250="background-position: top right;"
data-350="background-position: top left;"
class="skrollable skrollable-between"></div>
When employing this method, everything functions as intended...but what exactly is the distinction? How can any issues be resolved?
The persistent flickering problem has proved challenging to tackle (citing webkit), yet why does altering the background-position exhibit peculiar behavior?
Appreciate your insights and assistance. Thank you!