Change stripe colors with jquery

by kuyabiye

HTML

<div id="pattern">r : <input type="range" class="bg-color" value="0" max="255" id="bg-r" /><br />
g : <input type="range" class="bg-color" value="0" max="255" id="bg-g" /><br />
    b : <input type="range" class="bg-color" value="0" max="255" id="bg-b" /><br />
    degree : <input type="range" class="bg-color" value="0" min="-90" max="90" id="degree" /><br />
    size: <input type="range" class="bg-color" value="25" max="300" id="size" />
</div>

CSS

#pattern {
    height: 500px;
background-color: #000;

background-image: -webkit-repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(255,255,255,.5) 35px, rgba(255,255,255,.5) 70px);

}

JavaScript

$(document).ready(function() {
    var $body = $('#pattern');
    $('.bg-color').change(function() {
        
        $body.css({
            backgroundColor: "rgb(" + $('#bg-r').val() + ',' + $('#bg-g').val() + ',' + $('#bg-b').val() + ")",
            backgroundImage: "-webkit-repeating-linear-gradient(" + $('#degree').val() + "deg, transparent, transparent " + $('#size').val() + "px, rgba(255,255,255,.5) " + $('#size').val() + "px, rgba(255,255,255,.5) " + $('#size').val() * 2 + "px)"          
        });
    });
    });