How to randomize backgroundPosition in JS without using mousemove to animate kaleidoscope

Question

Trying to make an kaleidoscope animation for a web page...but only could find this example but it uses mouse movements. How do I modify so that it randomizes the background instead of mouse movements?

HTML

<div class="kal_main">
    <div class="kal_cont">
      <div class="ks s1"><div class="ksc"></div></div>
      <div class="ks s2"><div class="ksc"></div></div>
      <div class="ks s3"><div class="ksc"></div></div>
      <div class="ks s4"><div class="ksc"></div></div>
      <div class="ks s5"><div class="ksc"></div></div>
      <div class="ks s6"><div class="ksc"></div></div>
      <div class="ks s7"><div class="ksc"></div></div>
      <div class="ks s8"><div class="ksc"></div></div>
      <div class="ks s9"><div class="ksc"></div></div>
      <div class="ks s10"><div class="ksc"></div></div>
      <div class="ks s11"><div class="ksc"></div></div>
      <div class="ks s12"><div class="ksc"></div></div>
    </div>
</div>

JS

$(document).ready(function() {
$(".kal_cont").each(function(i){ 
    $(this).mousemove(function(e) {
        $(this).find(".ksc").each(function(i){ 
            $(this).css({backgroundPosition: e.pageX+"px "+e.pageY+"px"});
        });
    });
});

});

CSS

body {
    font-family: Verdana, Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.example {
    width: 920px;
    height: 510px;
    border: 0px #000 solid;
    margin: 0px auto;
    padding: 0px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}

    /* common kaleidoscope styles */
.kal_main {
    background-image: url(../patterns/Animation-Background.png);
    overflow: hidden;
    width: 920px;
    height: 510px;
    margin: auto;
}

.kal_cont {
    width: 140%;
    height: 140%;
    left: -20%;
    top: -20%;
    position: relative;
    margin: auto;
}

.kal_cont .ks {
    -webkit-transform-origin: right top;
    -moz-transform-origin: right top;
    -o-transform-origin: right top;
    transform-origin: right top;
    width: 50%;
    height: 50%;
    position: absolute;
    top: 50%;
    left: 0;
    z-index: 10;
    overflow: hidden;
}

.kal_cont .ksc {
    height: 100%;
    width: 100%;
    -webkit-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -o-transform: rotate(30deg);
    transform: rotate(30deg);
    position: relative;
    -webkit-transform-origin: left top;
    -moz-transform-origin: left top;
    -o-transform-origin: left top;
    transform-origin: left top;
    left: 100%;
    top: 0;
    background-image: url(../patterns/Brain-no-stem.png);
}

Having trouble posting the rest of the CSS code.

Answer 1

Its hard to answer without seeing an example, but its likely going to be something like this. When the document is ready, the animateKS function is called. This function loops over each ".ksc" and sets a new background position, then sets a time out to do the same thing 200-500 ms from now (you can tweak this amount of time by playing with the numbers that you pass to getRandom.

Note: As it is written, this code won't work. The code that sets the background position is still setting based on e.pageX and e.pageY, which was the position of the mouse in the example you posted. You will need to use different values to change the background position. Depending on what you are trying to do, it may be as easy as passing the result of a call to getRandom passing the appropriate range.

function getRandom(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

var bgPos = 0;
function animateKS() {
    $(".ksc").each(function(i){ 
        $(this).css({
            backgroundPosition: bgPos+"px "+bgPos+"px"
        });
    });
    bgPos = bgPos+10;
    setTimeout(animateKS, getRandom(200, 500));
}

$(document).ready(function() {
    animateKs();
});