JSFiddle - React, Tailwind, and code Playground

by HappyCougar

HTML

<div class="rainbow_box"><div class="rainbow_cougar"><img src="http://cougardesign.ru/templates/cougarnest/images/COUGAR.png" alt="" class="r_cougar"/></div></div>

CSS

.rainbow_box {
    width:300px;
    height:300px;
    background:#fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    padding:25px;
}
.rainbow_cougar {
	width:300px;
	height:300px;
	background:#c6c6c6 url(http://cougardesign.ru/templates/cougarnest/images/colorbar.png);
    background-size: 460px;
}

JavaScript

var scrollSpeed = 30;
var current = 0;
var direction = 'h';

$('.rainbow_box').mousedown(function(){ return false; });
function bgscroll()
{
    current -= 1;
    $('div.rainbow_cougar').css("backgroundPosition", (direction == 'h') ? current+"px 0" : "0 " + current+"px");
}
setInterval("bgscroll()", scrollSpeed);