Now, for the <script> itself. At the bottom of the HTML file, as usual in the empty anonymous function, add the following code:
var bg = $("#background");
var mg = $("#midground");
var fg = $("#foreground");
$(document).keydown(function(e) {
if (e.which === 39) { //right arrow key
bg.animate({ backgroundPosition: "-=1px" }, 0, "linear" );
mg.animate({ backgroundPosition: "-=10px" }, 0, "linear" );
fg.animate({ backgroundPosition: "-=20px" }, 0, "linear" );
}
});If we run this page in a browser now, we should find that as we hold down the right arrow key, the different background image slices move at relatively slower speeds with the foreground almost rushing past and the background moving leisurely along.