How To Animate Multiple Boxes Flying Across The Screen Using jQuery

This fourth iteration is where things are going to start coming together. We have the basic structure of a colored div container moving across the screen from different Y positions and at different speeds. Now, we’re going to clean up the code and start to customize it to our particular application.

iteration4.html

<html>
<head>
<script type="text/javascript" src="iteration4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<style>
    body {
        overflow: hidden;
    }

    div.window {
        position: absolute;
        background-color: black;
        left: -427px;
        width: 427px;
        height: 320px;
    }

    div.window img {
        width: 100%;
        height: inherit
    }
</style>

</head>
<body>
<script>
$(document).ready(function(){
       makebox();
    });
</script>

<div class="window"></div>

</body>
</html>

In this HTML code, we’ve moved up from a 200px square to a 427x320px rectangle that will more closely fit the thumbnail images that we’re going to be using to fill the “flying windows”. We’ve also confined the viewport to just the visible size of the screen (no more scroll bar) and moved the starting position of the animated divs to just off the left side of the screen. Images in the “window” divs will take up the entire size of the container.

iteration4.js

function makebox() {
    $(".window:not(:animated)").each(function() {
        $(this).css({"top": Math.random() * window.innerHeight - 160,"left": "-500px","backgroundColor": getRandomColor});
        $(this).animate({left: "800px"}, Math.random() * 5000 + 5000, makebox);
    });
}

Thanks to some jQuery, we are able to reduce the length of the function by about half while adding some more sophisticated behavior!

$(".window:not(:animated)").each(function() This initial line tests whether or not each div container of class “window” is currently being animated. If it’s not being animated, then the attached function will run.

$(this).css({"top": Math.random() * window.innerHeight - 160,"left": "-500px","backgroundColor": getRandomColor}); The this jQuery object will apply the subsequent code to each matching object from the previous test. In this case, we’ll apply new CSS properties to the particular div: a starting Y position that’s some random fraction of the current viewport’s height (minus half of the height of the div to make sure it appears on the screen), a starting X position that’s 500 pixels left of the left edge, and a random background color (defined by the getRandomColor() function that hasn’t changed).

$(this).animate({left: "800px"}, Math.random() * 5000 + 5000, makebox); This version of the animate method will move the current div container across the screen to a position 800 pixels from the left edge (the right edge of the iframe). The animation will take some random time between 5 and 10 seconds to complete.

If we add more div containers to the HTML document, we get more windows flying across the screen:

iteration4.html

iteration4.js

Leave a Reply Cancel reply