Applying background color based on scrolling content

Applying background color based on scrolling content

Here is my JsFiddle
I want to apply background-color change property to circle when the window
slides. Like in the beginning only first circle will have
background-color. and when the images slides to second screen the second
circle will have only color.
Can anybody guide me how to achieve that.
Jquery:
$(document).ready(function () {
setInterval(function () {
var A = $('.gallery').scrollLeft();
if (A < 993) {
$('.gallery').animate({
scrollLeft: '+=331px'
}, 300);
}
if (A >= 993) {
$('.gallery').delay(400).animate({
scrollLeft: 0
}, 300);
}
}, 3000);
});