Random background image on mouse movement

Question

I'm not a programmer, but I'm capable of modifying scripts due to some basic programming skills.

I've got my CSS (only needs to work for 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 I want to do is the following:

Read out all images in the "bg" directory.
Display a random image from that directory as background image.

Doing this for every time you reload the page is easy and I've already managed to do that. But here comes the tricky part:

The random background image shall change everytime after the mouse has moved a distance of (let's say) 50px.
Ideally the image should change with a quick transition of like 100ms.

Basically high performance isn't an issue. But the smoother it works the better. I'd be very happy about a bit of help. Doesn't matter if it's PHP, JS, jQuery or whatever.

I'm not a surgeon, but I'm sure I could modify a human body with some basic knife skills. ;) — The Blue Dog, Mar 20 '14 at 20:51
@TheBlueDog and you provide no guarantee of good work with that knife hahaha — DontVoteMeDown, Mar 20 '14 at 20:52
Your best bet is to break down your idea into small steps and research how to do each and come back when you have problems with your code. This isn't a site for can you do this for me/give me codes. — Class, Mar 20 '14 at 20:54

score 0 · Answer 1 · edited May 23 '17 at 12:11

To get all of the files in a directory, you need to 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 to @Ruel and his post for this code)

You can then echo the array into your 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 that you have the array, just change the image onMouseMove:

$("body").mousemove(function(){

    $(this).css("background", "url('" + images[Math.floor(Math.random() * images.length)]+"')");

});

score 0 · Answer 2 · answered Mar 20 '14 at 21:04

First, get all the images in the directory with PHP.

<?php
$images = array_map('basename', glob('path/to/images/*{.gif,*.GIF,*.jpg,*.JPG,*.jpeg,*.JPEG,*.png,*.PNG}', GLOB_BRACE));
?>

This gets all the images in the folder path/to/images. basename() strips all the absolute path and just gets an array of filenames.

Now we will need to do something with them in JavaScript, so on your web page, let's put them into a JavaScript array:

<script>
var images = <?php print json_encode($images); ?>;
</script>

By using json_encode(), we converted the PHP array into an array JavaScript can use.

Next, let's preload the images (I'm a jQuery fan myself).

<script>
(function ($) {
    $(function () {
        var images = <?php print json_encode($images); ?>;
        $.each(images, function (i, image) {
            $('<img src="path/to/images/'+image+'" style="width: 1px; height: 1px; left: -9999px;">').appendTo($('body'));
        });
    });
})(jQuery);
</script>

Then we can attach a `mousemove` event:

<script>
(function ($) {
    $(function () {
        var images = <?php print json_encode($images); ?>;
        $.each(images, function (i, image) {
            $('<img src="path/to/images/'+image+'" class="random_image">').appendTo($('body'));
        });

        var x = 0, y = 0;
        $(document).mousemove(function (v) {
            var nx = v.clientX, ny = v.clientY;
            if (Math.abs(nx-x) + Math.abs(ny-y) > 50) {
                $('.random_image').removeClass('show').eq(Math.floor(Math.random()*images.length)).addClass('show');
                x = nx;
                y = ny;
            }
        }).mousemove();
    });
})(jQuery);
</script>

Thanks. I've tried to use it but without success so far.What I don't get is why you use the tag instead of putting it into the CSS (background of the body) ... is that only to preload it? — user3005494, Mar 25 '14 at 18:55

Random background image on mouse movement

2 Answers2