javascript - Random background image on mouse movement -

i'm not programmer, i'm capable of modifying scripts due basic programming skills.

i've got css (only needs work up-to-date browsers):

html { background: url(bg/random.jpg) no-repeat center center fixed;  -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } 

what want following:

• read out images in "bg" directory.
• display random image directory background image.

doing every time reload page easy , i've managed that. here comes tricky part:

• the random background image shall change everytime after mouse has moved distance of (let's say) 50px.
• ideally image should change quick transition of 100ms.

basically high performance isn't issue. smoother works better. i'd happy bit of help. doesn't matter if it's php, js, jquery or whatever.

to of files in directory, need use php:

function directorytoarray($directory, $recursive) { $array_items = array(); if ($handle = opendir($directory)) {     while (false !== ($file = readdir($handle))) {         if ($file != "." && $file != "..") {             if (is_dir($directory. "/" . $file)) {                 if($recursive) {                     $array_items = array_merge($array_items, directorytoarray($directory. "/" . $file, $recursive));                 }                 $file = $directory . "/" . $file;                 $array_items[] = preg_replace("/\/\//si", "/", $file);             } else {                 $file = $directory . "/" . $file;                 $array_items[] = preg_replace("/\/\//si", "/", $file);             }         }     }     closedir($handle); } return $array_items; } 

(shoutout @ruel , his post code)

you can echo array javascript:

<script type="text/javascript"> var images = new array( <?php     $images = directorytoarray("bg", true);     for($i = 0; $i < count($images); $i++)     {         echo "\"{$images[$i]}\"";         if($i != (count($images)-1))             echo ",";     } ?> </script> 

now have array, change image onmousemove:

$("body").mousemove(function(){      $(this).css("background", "url('" + images[math.floor(math.random() * images.length)]+"')");  });