Sunday, February 10, 2008

JavaScript: Falling Objects (Images)

This code allows for one to enable a picture to "fall". 
It works by using the image as a background (so make sure to have plenty of padding in the image itself). 
It can use any image, and can make it fall as the background for any tag specified.  This code is
free for all to use.

NOTE, this script requires the href="http://www.prototypejs.org/" target="_blank">Prototype Framework.



valign="top">

/**
* @author Navarr
*
* Requires ProtoType

*/
     // Don't Touch This!
       
window.snowflake = new Array;
    // Active?
       
window.snowflake["active"]    = true;
   
// Image to use?
       
window.snowflake["image"]    = "/temp/img/hearts.png";

    // Div to put it in?
       
window.snowflake["div"]       
= "htmlBody";
    // Speed (Higher the Number, the
Slower it is)
       
window.snowflake["speed"]    = 7;

if
(window.snowflake["active"])
{
   
Event.observe(window,'load',function()
    {
       
window.setInterval('startFalling()',window.snowflake["speed"]*10);
   
});
}
function startFalling()
{
   
if (!window.y) { window.y = 0; }
    window.y = window.y+10;
   
if (window.y > window.innerHeight)
    {
       
window.y = 10 + (window.innerHeight%10);
    }
   
ele = $(window.snowflake["div"]);
   
ele.style.backgroundImage = "url('" + window.snowflake["image"] + "')";

    ele.style.backgroundRepeat = "repeat";
   
ele.style.backgroundPosition = "0px " + window.y + "px";
   
ele.style.backgroundAttachment = "fixed";
}